Canvas学习记录：画布设置及简单图形绘制

概览

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素
类似<img>，但只有两个属性：width 和 height
(初始化为 width: 300px ， height：150px)

用width和height属性为明确规定宽高，而不是使用CSS。

getContext() :获得渲染上下文和它的绘画功能

检查浏览器是否支持：

HTML：

<canvas id="tutorial" width="150" height="150"></canvas>

JS：

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

图形绘制

画布栅格：

1. 矩形

fillRect(x, y, width, height)： 绘制一个填充的矩形
strokeRect(x, y, width,height) ：绘制一个矩形的边框
clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明。

实例：

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

显示：

另有：

rect(x, y, width, height) //绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。

2. 路径绘制

beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
（调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（））
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
（绘制一条从当前点到开始点的直线来闭合图形）
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
（调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。）

3. 三角形

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

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

显示：

4. 移动笔触

moveTo(x, y)

将笔触移动到指定的坐标x以及y上。
常用于：

1. beginPath()调用后，设置起点。
2. 绘制不连续的路径。

5. 直线：lineTo(x, y)

6. 圆弧：arc(x, y, radius, startAngle, endAngle, anticlockwise)

(x,y) 为绘制圆弧所在圆上的圆心坐标
radius为半径
startAngle / endAngle : 用弧度定义了开始以及结束的弧度（以x轴为基准）
anticlockwise为一个布尔值：为true时，是逆时针方向，否则顺时针方向

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

实例：ctx.arc(75,75,50,0,Math.PI*2,true) //一个整圆

7. 贝塞尔曲线：

用来绘制复杂有规律的图形 :

quadraticCurveTo(cp1x, cp1y, x, y)

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

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

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

使用Path2D对象

使用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);    //圆形填充
  }
}

显示：