Résumé des points à noter lors de l'utilisation des compétences du didacticiel canvas_html5

1. Tutoriel chinois sur le canevas https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial

2. La largeur et la hauteur par défaut du canevas sont 300 et 150. Pour éviter les exceptions, il est préférable de utilisez les attributs d'affichage pour les ajouter. Ajoutez de la largeur et de la hauteur sans utiliser de CSS

3. Ajoutez des instructions pour les navigateurs qui ne prennent pas en charge la balise canvas

4. Le navigateur prend en charge Canvas via le code js suivant

Copier le code

Le code est le suivant :

var canvas = document.getElementById('tutorial ');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// code de dessin ici
} else {
// code canevas non pris en charge ici
}

5. Canvas ne prend en charge que le dessin d'une forme de base, c'est-à-dire le rectangle, mais d'autres graphiques peuvent être dessinés à travers. chemin du canevas

6. Dessiner un rectangle Il existe quatre fonctions : rect, fillRect, StrokeRect et clearRect

7.beginPath est utilisé pour démarrer un nouveau calque de chemin S'il n'est pas ajouté, cela signifie dessiner dessus. la couche de chemin d'origine. L'effet des deux morceaux de code suivants est complètement différent, le premier code montre deux lignes rouges, le deuxième code montre une ligne noire et une ligne rouge

Copier le code

Le code est le suivant :

var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo (100.5,20.5);
ctx.lineTo(200.5,20.5); ,40.5);
ctx.lineTo(200.5,40.5)
ctx.StrokeStyle = '#f00';
ctx.Stroke(); >


Copier le code

Le code est le suivant :

var ctx = document.getElementById('cvs').getContext( '2d'); ctx.beginPath(); ctx .moveTo(100.5,20.5); ctx.lineTo(200.5,20.5); ctx.beginPath();

ctx.moveTo(100.5,40.5);

ctx.lineTo(200.5,40.5)

ctx.strokeStyle = '#f00';


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)然後建立新的矩陣，參數作用同上
　　rotate(angle) ，（一個半徑等於1弧度，2πr/r=弧度即360=2π，即1=π/180）
20、動畫其實就是不斷清空畫板（clearRect()），然後重繪