canvas入门

方便个人理解而写的，有些内容是摘抄过来方便翻阅，

在JavaScript里写

<canvas id="canva" ></canvas>
<Script>
var can= document.getElementById("canva");
var ctx = can.getContext("2d")
</Script>

<canvas>只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的。

首先如果要画任何形状，它的坐标都是以左上角为原点开始的，所以如果为了方便自己画，可以将中心设置一下（不一定非要设置）

绘制矩形

①ctx.fillRect(x,y,width,height) 绘制一个填充内容的矩形，x，y：矩形起始点x/y轴坐标

ctx.fillStyle = 'green';
ctx.fillRect(20, 10, 150, 100);

②ctx.strokeRect(x, y, width, height);   方法绘制一个描边矩形，其起点为(x, y) ，其大小由宽度和高度指定。

ctx.strokeStyle = 'green';
ctx.strokeRect(20, 10, 160, 100);

 ③ctx.clearRect(x, y, width, height);      方法在一个矩形区域内设置所有像素都是透明的(rgba(0,0,0,0))。这个矩形范围的左上角在 (x, y)，宽度和高度分别由 width 和height确定。

ctx.clearRect(10, 10, 120, 100);

这里演示擦去其他的

绘制路径

步骤：

①创建路径起始点

②用画图命令去画出路径

③路径封闭

④生成路径，描边或填充去渲染。

生成路径的第一步：beginPath()

通过线条来绘制图形轮廓:stroke()

通过填充路径的内容区域生成实心的图形:fill()

闭合路径之后图形绘制命令又重新指向到上下文中:closePath()

设置起始点moveTo(x,y) 

绘制直线lineTo(x,y)

调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

闭合路径closePath(),不是必需的,如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做

绘制圆/圆弧

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:

弧度=(Math.PI/180)*角度。

arc（x,y,r,起始角度，终止角度，逆时针/顺时针（默认顺）true为逆时针） 

用 translate（2/x,2/y)就很方便了。响应上面的改变中心

如果画一个圆，画布大小（200，180），半径80，这样就得到了一个黑色的圆了（圆点在中心）

  ctx.translate(100, 90)
  ctx.beginPath();
  ctx.arc(0,0.80,0,2*Math.PI)
  ctx.closePath();
  ctx.fillStyle="black"
  ctx.fill();

圆弧就是终止角度不满2pi，就是圆弧了

 绘制三角形

  ctx.beginPath();
  ctx.moveTo(75, 50);
  ctx.lineTo(100, 75);
  ctx.lineTo(100, 25);
  ctx.fill();

二次贝塞尔曲线及三次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

 

二次贝塞尔曲线有一个开始点（蓝色）、一个结束点（蓝色）以及一个控制点（红色），而三次贝塞尔曲线有两个控制点。

参数x、y在这两个方法中都是结束点坐标。cp1x,cp1y为坐标中的第一个控制点，cp2x,cp2y为坐标中的第二个控制点。

 一个气泡案例（我是搬运工，这里贝塞尔曲线不多说明了）

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // 二次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(75, 25);
    ctx.quadraticCurveTo(25, 25, 25, 62.5);
    ctx.quadraticCurveTo(25, 100, 50, 100);
    ctx.quadraticCurveTo(50, 120, 30, 125);
    ctx.quadraticCurveTo(60, 120, 65, 100);
    ctx.quadraticCurveTo(125, 100, 125, 62.5);
    ctx.quadraticCurveTo(125, 25, 75, 25);
    ctx.stroke();
   }
}

一个爱心案例

 

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

     //三次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fill();
  }
}

关于色彩

fillStyle=color  设置图形的填充颜色

stokeStyle=color 设置图形轮廓的颜色

默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）

如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

透明度 Transparency

globalAlpha=transparencyValue 默认为1.0，影响到里面所有图形的透明度（0-1）

或者rgba里面设置也可（x,x,x,0.5)

线型 Line Styles

lineWidth=value  线条宽度

属性值必须为整数，默认1.0，要注意绘制的线路，才能画出更精确的图，1.0的是左右各半像素

lineCap=type 线条末端样式

type有butt（默认值），round，square（端点加上了等宽且高度为一半线宽的方块）

 lineJoin=type 线条间接合处的样式

type值 round（默认值），bevel，miter

miterLimit=value 限制两条线相交时接处最大长度

miterLimit属性

所见的应用 miter 的效果，线段的外侧边缘会被延伸交汇于一点上。线段之间夹角比较大时，交点不会太远，但随着夹角变小，交点距离会呈指数级增大，miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。miterLimit可以单独设置，不受显示比例改变或任何仿射变换的影响：它只影响线条边缘的有效绘制形状

• miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
• 斜接限定值默认为10.0，这将会去除所有小于大约11度的斜接。
• 斜接限定值为√2 ≈ 1.4142136 （四舍五入）时，将去除所有锐角的斜接，仅保留钝角或直角。
• 1.0是合法的斜接限定值，但这会去除所有斜接。
• 小于1.0的值不是合法的斜接限定值

getLineDash（）返回一个包含当前虚线样式，长度非负偶数的数组

setLineDash（segments） 设置当前虚线样式

用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式. setLineDash 方法接受一个数组，来指定线段与间隙的交替；

lineDashOffset=value 设置虚线起始偏移量

lineDashOffset 属性设置起始偏移量.