canvas

一.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可以是图片、视频，或者其他 <canvas> 元素

(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);
  }