DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> canvas使用注意點總結
canvas使用注意點總結
編輯:HTML5詳解     
1、canvas中文教程https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial 

2、canvas默認寬高是300、150,為避免異常,最好使用顯示屬性添加而不通過CSS來添加寬高 

3、在canvas標簽內部添加不支持canvas標簽的浏覽器的說明 

4、通過下面的JS代碼也能判斷浏覽器是否支持canvas 

復制代碼代碼如下:
var canvas = document.getElementById('tutorial'); 
if (canvas.getContext){ 
var ctx = canvas.getContext('2d'); 
// drawing code here 
} else { 
// canvas-unsupported code here 


5、canvas只支持一種基本形狀的繪制,即矩形,但是其它圖形都可以通過canvas路徑來繪制 

6、繪制矩形有四個函數:rect、fillRect、strokeRect和clearRect 

7、beginPath的作用用來開始一個新的路徑層,如果不加就表示在原來路徑層上繪制,下面兩段代碼效果是完全不一樣的,第一段代碼顯示兩條紅線,第二段代碼顯示一條黑線和一條紅線 

復制代碼代碼如下:
var ctx = document.getElementById('cvs').getContext('2d'); 
ctx.beginPath(); 
ctx.moveTo(100.5,20.5); 
ctx.lineTo(200.5,20.5); 
ctx.stroke(); 
ctx.moveTo(100.5,40.5); 
ctx.lineTo(200.5,40.5) 
ctx.strokeStyle = '#f00'; 
ctx.stroke(); 


復制代碼代碼如下:
var ctx = document.getElementById('cvs').getContext('2d'); 
ctx.beginPath(); 
ctx.moveTo(100.5,20.5); 
ctx.lineTo(200.5,20.5); 
ctx.stroke(); 
ctx.beginPath(); 
ctx.moveTo(100.5,40.5); 
ctx.lineTo(200.5,40.5) 
ctx.strokeStyle = '#f00'; 
ctx.stroke(); 

8、如果不需要路徑閉合,closePath可以不用,如果使用了fill則路徑則會自動閉合,不需要再使用closePath了 

9、只要有足夠的耐性是完全可以利用貝塞爾曲線繪制任何圖形的 

10、二次方曲線在火狐下存在bug,因此可以利用三次方曲線代替二次方曲線使用 

11、圖像(如 PNG,GIF,JPEG等)都可以引入到 canvas 中,而且其它的 canvas 元素也可以作為圖像的來源 

12、下面是基本的canvas圖片繪制代碼,其中 image 是 image 或者 canvas 對象,x 和 y 是其在目標 canvas 裡的起始坐標 

drawImage(image, x, y) 
下面一段代碼表示縮放圖片,width和height表示縮放的尺寸 
drawImage(image, x, y, width, height) 
下面一段代碼表示剪切圖片,第一個參數和其它的是相同的,都是一個圖像或者另一個 canvas 的引用。其它8個參數中分別表示圖片中裁減的起始x坐標,圖片中裁減的起始y坐標,裁減區域寬度,裁減區域高度,所畫位置x坐標,所畫位置y坐標,所畫圖形寬度,所畫圖形高度,裁剪區域的尺寸是可以和所畫圖形的尺寸不一樣的,此時會縮放到所畫圖片的尺寸 

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 
13、strokeStyle 是用於設置圖形輪廓的顏色,而 fillStyle 用於設置填充顏色。color 可以是表示 CSS 顏色值的字符串,漸變對象或者圖案對象。默認情況下,線條和填充顏色都是黑色(CSS 顏色值 #000000)。 

14、圖像透明度可以用globalAlpha = transparency value或者rgba顏色值來表示 

15、lineWidth 屬性設置當前繪線的粗細,為解決1px線寬bug問題,采用+0.5的方式來解決 

16、lineCap 屬性最左邊的線用了默認的 butt 。可以注意到它是與輔助線齊平的。中間的是 round 的效果,端點處加上了半徑為一半線寬的半圓。右邊的是 square 的效果,端點處加上了等寬且高度為一半線寬的方塊 

17、lineJoin 屬性這裡我同樣用三條折線來做例子,分別設置不同的 lineJoin 值。最上面一條是 round 的效果,邊角處被磨圓了,圓的半徑等於線寬。中間和最下面一條分別是 bevel 和 miter 的效果。當值是 miter 的時候,線段會在連接處外側延伸直至交於一點,延伸效果受到下面將要介紹的 miterLimit 屬性的制約 

18、save 和 restore 方法是用來保存和恢復 canvas 狀態的,都沒有參數。Canvas 的狀態就是當前畫面應用的所有樣式和變形的一個快照。Canvas 狀態是以堆(stack)的方式保存的,每一次調用 save 方法,當前的狀態就會被推入堆中保存起來。每一次調用 restore 方法,上一個保存的狀態就從堆中彈出,所有設定都恢復。 

19、transform(1, 0, 0, 1, 0, 0)參數分別表示水平方向縮放、水平方向旋轉(順時針)、垂直方向旋轉(逆時針)、垂直方向縮放、水平方向偏移量、垂直方向偏移量 
  setTransform(1, 0, 0, 1, 0, 0)表示重置前一個變換矩陣然後構建新的矩陣,參數作用同上 
  rotate(angle),(一個半徑等於1弧度,2πr/r=弧度即360=2π,即1=π/180) 

20、動畫其實就是不斷清空畫板(clearRect()),然後重繪
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved