canvas画布

什么是 canvas?

HTML5 <canvas> 元素用于图形的绘制，经过脚本 (一般是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚原本绘制图形。

你能够经过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

建立一个画布（Canvas）

一个画布在网页中是一个矩形框，经过 <canvas> 元素来绘制.

默认状况下 <canvas> 元素没有边框和内容。

线条属性

• lineCap 属性设置或返回线条末端线帽的样式，能够取如下几个值： 
  “butt” 向线条的每一个末端添加平直的边缘（默认）； 
  “round” 向线条的每一个末端添加圆形线帽； 
  “square” 向线条的每一个末端添加正方形线帽。

• lineJoin 属性当两条线交汇时设置或返回所建立边角的类型，能够取如下几个值： 
  “miter” 建立尖角(默认)； 
  “bevel” 建立斜角； 
  “round” 建立圆角。

• miterLimit 属性设置或返回最大斜接长度（默认为10）。斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效

•  var canvas = 

      document.getElementById("canvas");    var context = canvas.getContext("2d");    //测试lineCap属性    //设置基准线便于观察    context.moveTo(10,10);    context.lineTo(10,200);    context.moveTo(200,10);    context.lineTo(200,200);    context.lineWidth="1";    context.stroke();    //butt    context.beginPath();    context.moveTo(10,50);    context.lineTo(200,50);    context.lineCap="butt";    context.lineWidth="10";    context.stroke();    //round    context.beginPath();    context.moveTo(10,100);    context.lineTo(200,100);    context.lineCap="round";    context.lineWidth="10";    context.stroke();    //square    context.beginPath();    context.moveTo(10,150);    context.lineTo(200,150);    context.lineCap="square";    context.lineWidth="10";    context.stroke();    //测试linJoin属性    //miter    context.beginPath();    context.moveTo(300,50);    context.lineTo(450,100);    context.lineTo(300,150);    context.lineJoin="miter";    context.lineWidth="10";    context.stroke();    //round    context.beginPath();    context.moveTo(400,50);    context.lineTo(550,100);    context.lineTo(400,150);    context.lineJoin="round";    context.lineWidth="10";    context.stroke();    //square    context.beginPath();    context.moveTo(500,50);    context.lineTo(650,100);    context.lineTo(500,150);    context.lineJoin="bevel";    context.lineWidth="10";    context.stroke();    //测试miterLimit属性    context.beginPath();    context.moveTo(700,50);    context.lineTo(850,100);    context.lineTo(700,150);    context.lineJoin="miter";    context.miterLimit="2";    context.lineWidth="10";    context.strokeStyle="#2913EC";    context.stroke();

• 填充样式

   

• 线性渐变 
  使用步骤 
  （1）var grd = context.createLinearGradient( xstart , ystart, xend , yend )建立一个线性渐变，设置起始坐标和终点坐标； 
  （2）grd.addColorStop( stop , color )为线性渐变添加颜色，stop为0~1的值； 
  （3）context.fillStyle=grd将赋值给context。

• 径向渐变 
  该方法与线性渐变使用方法相似，只是第一步接收的参数不同 
  var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圆心的坐标和圆半径以及终点圆心的坐标和圆的半径。

• 位图填充 
  createPattern( img , repeat-style )使用图片填充，repeat-style能够取repeat、repeat-x、repeat-y、no-repeat。

• 图形变换

  平移：context.translate(x,y)，接收参数分别为原点在x轴方向平移x，在y轴方向平移y。

  缩放：context.scale(x,y)，接收参数分别为x坐标轴按x比例缩放，y坐标轴按y比例缩放。

  旋转：context.rotate(angle)，接收参数是坐标轴旋转的角度。