Html5 Canvas介绍
1. 获取绘图上下文
var mycanvas = document.getelementbyid('mycanvas');
var context = mycanvas.getcontext('2d');
2. 绘图函数
注：x = positionx y= position y w = width h = height
绘制矩形:
strokerect(x,y,w,h); -----边框矩形
fillrect(x,y,w,h); ----填充矩形
清除区域:
clearrect(x,y,w,h);
绘制路径：
beginpath();清楚路径列表，每次绘制新的形状之前都要调用
moveto();开始绘制的坐标
lineto();绘制到哪里
closepath();关闭路径形成闭合的图形,如果不想形成闭合图形就不需要添加
stroke();执行描边,连线!!!!!!!!!!!!
strokestyle = '(十六进制颜色值)或(颜色英文拼写)'; 设置描边颜色
linewidth();设置描边线条的粗细
fillstyle = '(十六进制颜色值)或(颜色英文拼写)'; 设置填充颜色
fill(); 执行填充
绘制弧形:
注：弧度 = 角度 * (math.pi / 180)
arc(x,y,radius(半径),startangle（起始弧度）,endangle（终止弧度）,counterclockwise(是否逆时针绘制));
arcto(x1,y1,x2,y2,ridius(弧的半径，半径小则离切线角越近));
绘制2次贝塞尔曲线：
quadraticcurveto(cpx(控制点坐标x),cpy（控制点坐标y）,x（末端点x）,y（末端点y）);
与moveto();的起始点配合使用。
绘制三次贝塞尔曲线：
beziercurveto(cpx1,cpy1,cpx2,cpy2,x,y); 有两个控制点，最后的x，y是结束点。
与moveto();的起始点配合使用。
clip（）；定义遮罩层，只能显示遮罩层之间的内容
透明度：使用rgba（）；
线性渐变色：
var grandient = createlineargradient(startx,starty,endx,endy) ;定义渐变区间
grandient.addcolorstop(0(比例),"blue");
grandient.addcolorstop(0.5(比例),"red");
ctx.fillstyle = grandient;
ctx.fill();
放射渐变：
var g = createradialgradient(x1,y1,r1,x2,y2,r2); 两个圆的相交区域为渐变区间
g.addcolorstop();
……
ctx.fillstyle = g;
ctx.fill();
例子：绘制台球桌:
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body style="text-align: center;">
8 <canvas id="mycanvas" width="500" height="500"/>
9 </body>
10 <script type="text/javascript">
11 var mycanvas = document.getelementbyid('mycanvas');
12 var ctx = mycanvas.getcontext('2d');
13 ctx.beginpath();
14 ctx.fillstyle = "#00ff00";
15 ctx.fillrect(0,0,500,500);
16
17 //绘制白球
18 drawwhitetableball(50,250,ctx);
19
20 //绘制红球组
21 drawredtableball(300,250,ctx);
22
23 drawredtableball(335,230,ctx);
24 drawredtableball(335,270,ctx);
25
26 drawredtableball(370,210,ctx);
27 drawredtableball(370,250,ctx);
28 drawredtableball(370,290,ctx);
29
30 drawredtableball(405,190,ctx);
31 drawredtableball(405,230,ctx);
32 drawredtableball(405,270,ctx);
33 drawredtableball(405,310,ctx);
34
35 function drawredtableball(positionx,positiony,ctx){
36 ctx.beginpath();
37 ctx.arc(positionx,positiony,20,0,360*math.pi/180,false);
38 var g = ctx.createradialgradient(positionx-4,positiony-4,5,positionx,positiony,20);
39 g.addcolorstop(0,"#ffffff");
40 g.addcolorstop(1,"#ff0000");
41 ctx.fillstyle = g;
42 // ctx.fillrect(positionx,positiony,positionx+20,positiony+20);
43 ctx.fill();
44 }
45
46 function drawwhitetableball(positionx,positiony,ctx){
47 ctx.beginpath();
48 ctx.arc(positionx,positiony,20,0,360*math.pi/180,false);
49 var g = ctx.createradialgradient(positionx-4,positiony-4,5,positionx,positiony,20);
50 g.addcolorstop(0,"rgba(255,255,255,1)");
51 g.addcolorstop(1,"rgba(255,255,255,0.8)");
52 ctx.fillstyle = g;
53 ctx.fill();
54 // ctx.fillrect(positionx,positiony,positionx+20,positiony+20);
55 }
56 </script>
57 </html>
放射渐变的理论参考这个大佬的讲解，写的很清楚：
https://www.cnblogs.com/tianma3798/p/5895811.html
上一篇： 前端常见的设计模式
下一篇： 自定义view 波浪效果