一.canvas基础知识总结
1.线条属性
(1).fillStyle和strokeStyle的色值及透明色写法
<1>.线性渐变
第一步,创建线性渐变的大小,var grad = context.createLinearGradient(startx,starty,endx,endy);第二步,添加渐变的比例和颜色,grad.addColorStop(stop,color);//stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
<2>.径向渐变
第一步,创建径向渐变,var grad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);第二步,添加渐变的比例和颜色,grad.addColorStop(stop,color);//stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
<3>.指定的方向重复指定的元素
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");//image可以是图片、视频，或者其他
(2).lineCap:butt(default);round;//圆形帽子;square;//方形帽子
设置或者返回线条的结束端点样式(线条首尾)(3).画五角星
var mycanvas = document.getElementById('mycanvas'); mycanvas.width = 800; mycanvas.height = 800; var ctx = mycanvas.getContext("2d"); star(ctx, 400, 400, 150, 300, 'pink', 1, 0); function star(ctx, x, y, r, R, borderColor, borderWidth, rot) { ctx.beginPath(); ctx.strokeStyle = borderColor; ctx.lineWidth = borderWidth; // ctx.moveTo(x, y);//!!!注意不需要定义线条开始坐标 for (var i = 0; i < 5; i++) { ctx.lineTo(Math.cos((18 + 72 * i) / 180 * Math.PI) * R + x, -Math.sin((18 + 72 * i) / 180 * Math.PI) * R + y); ctx.lineTo(Math.cos((54 + 72 * i) / 180 * Math.PI) * r + x, -Math.sin((54 + 72 * i) / 180 * Math.PI) * r + y); } ctx.closePath(); ctx.stroke(); } (4)lineJoin:miter(default,创建尖角);round(创建圆角);bevel(创建斜角)
当两条线交汇时,设置或返回所创建边角的类型(5)miterLimit
用来限制内角与外角间最大的距离（默认是10），一旦超过这个距离lineJoin就会使用bevel的衔接方式
2.图像变换
(1)transform(a,b,c,d,e,f)和setTransform(a,b,c,d,e,f) 设置变换矩阵
(2)ctx.arc(centerx,centery,radius,,sAngle,eAngle,counterclockwise)
绘制圆角矩形
var canvas = document.getElementById('arcRect'); var ctx = canvas.getContext("2d"); canvas.width = 1200; canvas.height = 800; drawArcRect(ctx, 200, 200, 300, 300, 20) function drawArcRect(ctx, x, y, width, height, r) { ctx.save();//保存没变换前的状态 ctx.translate(x, y); //平移x,y draw(ctx, width, height, r) ctx.stroke(); ctx.restore();//恢复图形之前save的状态 } function draw(ctx, width, height, r) { ctx.arc(r, r, r, Math.PI, 1.5 * Math.PI); ctx.lineTo(width - r, 0); ctx.arc(width - r, r, r, 1.5 * Math.PI, 2 * Math.PI); ctx.lineTo(width, height - r); ctx.arc(width - r, height - r, r, 0, 0.5 * Math.PI); ctx.lineTo(r, height); ctx.arc(r, height - r, r, 0.5 * Math.PI, Math.PI); ctx.lineTo(0, r); } 