Canvas绘制图形

目标

• 学会绘制图形
• 掌握绘制路径

1、栅格
画布栅格

2、绘制矩形

• fillRect(x, y, width, height)
  绘制一个填充的矩形

• strokeRect(x, y, width, height)
  绘制一个矩形的边框

• clearRect(x, y, width, height)
  清除指定矩形区域，让清除部分完全透明。
  x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

3、案例

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

    ctx.fillRect(25, 25, 100, 100);		//边长为100px的黑色正方形
    ctx.clearRect(45, 45, 60, 60);		//从正方形的中心开始擦除了一个60px*60px的正方形
    ctx.strokeRect(50, 50, 50, 50);		//在清除区域内生成一个50*50的正方形边框。
  }
}

4、绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

1. 首先，你需要创建路径起始点。
2. 然后你使用画图命令去画出路径。
3. 之后你把路径封闭。
4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

beginPath()

    新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()

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

moveTo（）

    指定起始位置。移动笔触

lineTo()

    绘制一条从当前位置到指定x以及y位置的直线。

stroke()

    通过线条来绘制图形轮廓。

fill()

    通过填充路径的内容区域生成实心的图形。

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

4、绘制图形
1.三角形

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

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

2.笑脸

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

    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
    ctx.stroke();
 }
}

3.贝塞尔曲线
聊天框（二次贝塞尔曲线）

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

4.矩形

rect(x, y, width, height)

5、基础工具
moveTo(x,y) 移动笔触

1.直线
lineTo(x,y) 绘制直线

2.园
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心，以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。

3.贝塞尔曲线
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为坐标中的第二个控制点。

4.矩形
rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。moveTo()方法自动设置坐标参数（0,0）

6、Path2D
你可以使用一系列的路径和绘画命令来把对象“画”在画布上。为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。

Path2D()
Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。

    new Path2D();     // 空的Path对象
    new Path2D(path); // 克隆Path对象
    new Path2D(d);    // 从SVG建立Path对象

	Path2D.addPath(path [, transform])​
        添加了一条路径到当前路径（可能添加了一个变换矩阵）。

我们创造了一个矩形和一个圆。它们都被存为Path2D对象，后面再派上用场。随着新的Path2D API产生，几种方法也相应地被更新来使用Path2D对象而不是当前路径。在这里，带路径参数的stroke和fill可以把对象画在画布上。

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

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}

SVG path
使用SVG path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。

这条路径将先移动到点 (M10 10) 然后再水平移动80个单位(h 80)，然后下移80个单位 (v 80)，接着左移80个单位 (h -80)，再回到起点处 (z)。你可以在Path2D constructor 查看这个例子。

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");