HTML5 Canvas 基础开发教程 总结

 <canvas>是html5当中的一个标签，通过Javascript来画图。

JavaScript Code 复制内容到剪贴板

1. <canvas id=”canvas” width=”150″ height=”150″></canvas>  
2. <script>  
3. var canvas = document.getElementById(”canvas”);  
4. var ctx = canvas.getContext(”2d”);  
5. ctx.fillStyle = “rgb(0,0,200)”;  
6. ctx.fillRect(10, 10, 50, 50);  
7. </script>  

画图形

这是canvas的网格，刚才的图形，x=10,y=10, width=150, height=150

不像svg, canvas仅支持一种图形-矩形，所有其它复杂的图形都是通过一些函数来组成的。

画矩形

fillRect(x,y,width,height) : 画一个填充的矩形
strokeRect(x,y,width,height) : 为一个矩形描边
clearRect(x,y,width,height) : 清楚一个矩形的一部分并且设为透明

rect(x, y, width, height)
直接画矩形，当调用rect方法时moveTo会直接定位到(0,0)位置

画路径

beginPath() 创建路径的第一步是调用beginPath方法，返回一个存储路径的信息
closePath() 从当前的点到起始点闭合路径
stroke()描边路径
fill()填充路径
lineTo(x, y) 从上一个起点到(x,y)的点画线，上一个起点可以通过moveTo来指定，默认为原先路径的终点

JavaScript Code 复制内容到剪贴板

1. ctx.beginPath();  
2. ctx.moveTo(75,50);  
3. ctx.lineTo(100,75);  
4. ctx.lineTo(100,25);  
5. ctx.fill();  

画弧线

arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x,y)是圆弧的圆心，radius-半径, startAngle和endAngle是圆弧的开始和结束弧度（radians = (Math.PI/180)*degree)，anticlockwise为true的话是逆时针，否则为顺时针

二次方曲线以及贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
(cp1x, cp1y),(cp2x,cp2y)是曲线的控制点（红点），(x,y)是曲线的终点

使用图像

drawImage(image, x, y)image-图像对象

JavaScript Code 复制内容到剪贴板

1. function draw() {  
2. var ctx = document.getElementById(’canvas’).getContext(’2d’);  
3. var img = new Image();  
4. img.onload = function(){  
5. ctx.drawImage(img,0,0);  
6. ctx.beginPath();  
7. ctx.moveTo(30,96);  
8. ctx.lineTo(70,66);  
9. ctx.lineTo(103,76);  
10. ctx.lineTo(170,15);  
11. ctx.stroke();  
12. }  
13. img.src = ‘images/backdrop.png’;  
14. }  
15.   
16. drawImage(image, x, y, width, height)width和height是目标canvas上图像的宽高  
17. drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)  

image参数与前面一样，后面的四个参数是截取的参数，再后面的四个参数是目标canvas图像的位置以及宽高

应用样式和颜色

fillStyle = color 设置填充色
strokeStyle = color 设置描边色
color可以是css颜色值，一个渐变对象或一个模式对象

线条样式
lineWidth = value 线条宽度

lineCap = type 线条的端点类型可以是butt(默认),round和square

lineJoin = type 连接线的类型：round,bevel和miter(默认)

miterLimit = value 当设置miter时的选项

渐变

通过下面两个方法创建一个canvasGradient对象, 就可以把这个对象应用于fillStyle和strokeStyle属性了

createLinearGradient(x1,y1,x2,y2) （x1,y1)到(x2,y2)的渐变
createRadialGradient(x1,y1,r1,x2,y2,r2) (x1,y1,r1)的圆到(x2,y2,r2)的圆

addColorStop(position, color) 为canvasGradient对象添加颜色，position-[0,1]区间的值，代表添加颜色的位置，color-添加的颜色(如#fff, rgba(0,0,0,1)等）

模式

createPattern(image,type) image-Image对象，type:repeat,repeat-x, repeat-y, no-repeat 可以讲其应用与fillStyle或strokeStyle属性

阴影

shadowOffsetX = float 阴影x偏移
shadowOffsetY = float 阴影y偏移
shadowBlur = float 模糊度
shadowColor = color 阴影颜色

JavaScript Code 复制内容到剪贴板

1. ctx.shadowOffsetX = 2;  
2. ctx.shadowOffsetY = 2;  
3. ctx.shadowBlur = 2;  
4. ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  
5. ctx.font = "20px Times New Roman";  
6. ctx.fillStyle = "Black";  
7. ctx.fillText("Sample String", 5, 30);  

变换

保存和恢复
save() Cavas状态被存储在栈中，当调用save，当前的画图状态将被保存的栈中
restore() 调用restore最后一次存储的状态会被恢复
转移
translate(x, y) 移动canvas坐标

旋转
rotate(angle) angle是旋转的角度，旋转的中心是canvas坐标原点，可以通过translate来移动canvas的坐标

缩放
scale(x, y) x是水平方向的缩放因子，y是垂直方向的缩放因子，必须都为正数
变换

JavaScript Code 复制内容到剪贴板

1. transform(m11, m12, m21, m22, dx, dy)  
2. setTransform(m11, m12, m21, m22, dx, dy)  

组合

globalCompositeOperation = type 设置不同形状的组合类型
type:(方的图形是已经存在的canvas内容，圆的图形是新的形状)
source-over(默认) - 在canvas内容上面画新的形状

destination-over

source-in

destination-in

source-out

destination-out

source-atop

destination-atop

lighter

darker

xor

copy

剪切路径

clip()

基本动画

基本的动画步骤：
1.清除canvas - clearRect
2.保存canvas状态 - save
3.画要做动画的形状
4.恢复canvas状态 - 如果你已经保存了状态，在画新的帧之前回复它
控制动画
setInterval(animateShape,500);
setTimeout(animateShape,500);

 

JavaScript Code 复制内容到剪贴板

1. var img = new Image();  
2. //User Variables  
3. img.src = 'Capitan_Meadows,_Yosemite_National_Park.jpg';  
4. var CanvasXSize = 800;  
5. var CanvasYSize = 200;  
6. var speed = 30; //lower is faster  
7. var scale = 1.05;  
8. var y = -4.5; //vertical offset  
9. //End User Variables  
10.   
11. var dx = 0.75;  
12. var imgW = img.width*scale;  
13. var imgH = img.height*scale;  
14. var x = 0;  
15. if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas  
16. var clearX  
17. var clearY  
18. if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas  
19. else { clearX = CanvasXSize; }  
20. if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas  
21. else { clearY = CanvasYSize; }  
22. var ctx;  
23.   
24. function init() {  
25.     //Get Canvas Element  
26.     ctx = document.getElementById('canvas').getContext('2d');  
27.     //Set Refresh Rate  
28.     return setInterval(draw, speed);  
29. }  
30.   
31. function draw() {  
32.     //Clear Canvas  
33.     ctx.clearRect(0,0,clearX,clearY);  
34.     //If image is <= Canvas Size  
35.     if (imgW <= CanvasXSize) {  
36.         //reset, start from beginning  
37.         if (x > (CanvasXSize)) { x = 0; }  
38.         //draw aditional image  
39.         if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }  
40.     }  
41.     //If image is > Canvas Size  
42.     else {  
43.         //reset, start from beginning  
44.         if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }  
45.         //draw aditional image  
46.         if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }  
47.     }  
48.     //draw image  
49.     ctx.drawImage(img,x,y,imgW,imgH);  
50.     //amount to move  
51.     x += dx;  
52. }  
53. <body οnlοad="init();">  
54. <canvas id="canvas" width="800" height="200"></canvas>