canvas的api小结
HTML
<canvas id="canvas"></canvas>
Javascript
var canvas=document.getElementById('canvas');
canvas.width
canvas.height
var context=canvas.getContext("2d")
//使用context进行绘制
//画图线
moveTo(x,y);
lineTo(x,y);
beginPath();
closePath();
//状态
lineWidth //线粗
strokeStyle //线颜色
fillStyle //封闭图形的填充颜色
//执行
stroke();
fill();
1.绘制矩形api
rect(x,y,width,height) //起始点坐标x,y 宽width 高height （普通）
fillRect(x,y,width,height) //绘制填充矩形
strokeRect(x,y,width,height) //绘制带边框矩形
2.线条属性
1.lineWidth 线宽
2.lineCap 线端点的形状
lineCap=“butt”（default）折头
“round” 圆头
“square”’ 方头
3.lineJoin 线段相交处
lineJoin=“miter”（default）尖角 miterLimit（当尖角太锋利，导致内角外角定点相距超过miterLimit的长度，将自动转为“bevel”）
“bevel” 折角
“round” 圆角
3.图形变换
save()
restore() //维持绘图的安全性
translate(x,y) //平移
rotate(deg) //旋转
scale(sx,sy) //放缩
变换矩阵：
transform(a,b,c,d,e,f)
setTransform(a,b,c,d,e,f)
4.填充样式
1.fillStyle的值
fillStyle = color 颜色
gradient 渐变
image 图片
canvas 画布
video 音频
2.fillStyle=color
1.#ffffff
2.642
3.rgb(255,128,0)
4.rgba(100,100,100,0.8)
5.hsl(20,62%,68%)
6.hsla(20,82%,33%,0.6)
7.red
3.fillStyle=gradient
//线性渐变色
var grd=context.createLinearGradient(xstart,ystart,xend,yend);
//径向渐变色
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
grd.addColorStop(stop,color)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 #canvas{
8 border: 1px solid #000;
9 display:block;
10 margin: 50px auto;
11 }
12 </style>
13 </head>
14 <body>
15
16 <canvas id="canvas">您的浏览器不支持Canvas</canvas>
17
18 </body>
19 <script>
20 window.onload=function (ev) {
21 var canvas = document.getElementById("canvas");
22 canvas.width = 800;
23 canvas.height = 785;
24 var context = canvas.getContext("2d");
25 linegradient(context);//线性渐变
26 radiagradient(context);//径向渐变
27 };
28
29 function linegradient(context) {
30 var gradient = context.createLinearGradient(0,0,800,600);
31 // 设置渐变颜色
32 gradient.addColorStop(0.0, "red");
33 gradient.addColorStop(0.2, "orange");
34 gradient.addColorStop(0.4, "yellow");
35 gradient.addColorStop(0.6, "green");
36 gradient.addColorStop(0.9, "cyan");
37 gradient.addColorStop(1.0, "blue");
38 //gradient.addColorStop(1.0, "purple");
39 // 使用渐变线填充
40 context.fillStyle = gradient;
41 context.fillRect(0, 0, 800, 800);
42 };
43
44 function radiagradient(ctx) {
45 var gradient = ctx.createRadialGradient(300, 300, 10, 100, 100, 50);
46 gradient.addColorStop(0, 'rgb(255,0,0)'); //红
47 gradient.addColorStop(0.5, 'rgb(0,255,0)');//绿
48 gradient.addColorStop(1, 'rgb(0,0,255)'); //蓝
49 ctx.fillStyle = gradient;
50 ctx.fillRect(0, 0, 600,600);
51 }
52 </script>
53 </html>
4.fillStyle=image||canvas||video
createPattern(img,repeat-style)
createPattern(canvas,repeat-style)
createPattern(video,repeat-style)
repeat-style: no-repeat（不平铺，就单张）
repeat-x（横向平铺）
repeat-y（纵向平铺）
repeat （横纵向平铺）