canvas学习笔记（一）

canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

<canvas width="600" height="400" id="canvas"></canvas>
注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<canvas>明确规定宽高，而不是使用CSS。

<canvas >元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

栅格
在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。上一页中的HTML模板中有个宽150px, 高150px的canvas元素。如右图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。在课程的最后我们会平移原点到不同的坐标上，旋转网格以及缩放。现在我们还是使用原来的设置。

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

       var canvas = document.getElementById('canvas')
        //使用画布的上下文 
        var ctx = canvas.getContext('2d')
        ctx.fillRect(100,100,100,100);
        ctx.clearRect(120,120,60,60);
        ctx.strokeRect(130,130,40,40)

canvas学习笔记（一）
绘制路径
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
moveTo(x, y)
将笔触移动到指定的坐标x以及y上。
当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。
绘制一个三角形

    var canvas = document.getElementById('canvas')
    //使用画布的上下文 
    var ctx = canvas.getContext('2d')
    // 填充三角形
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(100,150);
    ctx.lineTo(150,100);
    ctx.closePath();
    ctx.fill();
    //描边三角形
    ctx.beginPath();
    ctx.moveTo(120,180);
    ctx.lineTo(170,180);
    ctx.lineTo(170,130);
    ctx.closePath();
    ctx.stroke();

canvas学习笔记（一）
圆弧
绘制圆弧或者圆，我们使用arc()方法。当然可以使用arcTo()，不过这个的实现并不是那么的可靠，所以我们这里不作介绍。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

arcTo(x1, y1, x2, y2, radius)

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
这里详细介绍一下arc方法，该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

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

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

笑脸例子

        var canvas = document.getElementById('canvas')
        //使用画布的上下文 
        var ctx = canvas.getContext('2d')
        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();

canvas学习笔记（一）

学习于MDN