Canvas画图基础

2018-05-02 14:14:00 浏览数 (1)

画矩形

Canvas画矩形还是比较方便的，可以用fillrect，clearrect，strokerect，rect几种方法，各自间有点区别，先上代码：

代码语言：javascript复制
// html
<canvas id="canvas" width="500" height="500" ></canvas>

var canvas1 = document.getElementById("canvas");
var ctx = canvas1.getContext('2d');
ctx.strokeStyle = '#ff4444'; 
ctx.fillStyle = '#000';                         
ctx.fillRect(100,100,100,100);
ctx.clearRect(120,120,60,60);
ctx.strokeRect(80,80,140,140);

ctx.beginPath();
ctx.rect(80, 250, 100, 100);
ctx.stroke();

绘制效果如下：

使用fillrect，clearrect，strokerect方法不用绘制路径,也不需要另外调用fill或者stroke方法来『上色』就可以绘制出图形，而rect方法仅仅是绘制出一个矩形的路径，还需要额外通过stroke或者fill方法才能绘制出矩形。

fillRect和strokeRect的区别就是画的是实心还是空心，而clearRect就是清空一个矩形区域，上图就是通过clearRect和fillrect配合画出的那个比较粗的矩形，实际上完全可以使用ctx.lineWidth来控制strokeRect的绘制宽度。

另外，矩形是Canvas里面唯一一种可以不通过路径就可以绘制的图形，其它的图形都需要生成一条路径才能绘制出来。

绘制路径

画了矩形再画个圆呗，

代码语言：javascript复制
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 7;

ctx.strokeStyle = '#ff4444';
ctx.arc(80, 80, 50, 0 ,Math.PI*2);
ctx.stroke();

绘制效果如下：

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

  • x,y: 描述弧的圆形的圆心的坐标。
  • radius: 描述弧的圆形的半径。
  • startAngle, endAngle: 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。
  • counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。

画了一个我们再画一个

代码语言：javascript复制
ctx.moveTo(170, 120);

ctx.strokeStyle = '#000';
ctx.arc(120, 120, 50, 0 ,Math.PI*2);
ctx.stroke(); // 再画圆

会发现，两个园都变成了黑色，而不是我们预期的一个红色一个黑色。

这里就要说到路径了，在画第二个圆的时候，我们把strokeStyle改了颜色，但是绘制的时候把所有已经有的路径，不管是否绘制过，都重新绘制了一遍，这里有两个圆的路径，所以两个都被涂上了黑色。

这里在绘制第二个圆之前我们需要使用beginPath方法来重新开一条『新路』,如果画的是非闭合路径，可能还需要使用closePath方法来从当前点绘制一条到开始点的直线来闭合路径。

顺时针和逆时针的区别

counterclockwise是arc方法的最后一个参数，表示顺时针画还是逆时针画，看字面比较容易理解，但是实际用起来却有点不一样。

分别通过顺时针和逆时针画两个圆：

代码语言：javascript复制
var canvas = document.getElementById("canvas1");
var ctx1 = canvas.getContext('2d');
ctx1.lineWidth = 7;

function draw(ctx, x) {
        ctx.clearRect(0, 0, 500, 500);
        ctx.beginPath();
        ctx.strokeStyle = '#ff4444';
        if (x < Math.PI*2) {
            x  = 0.05;
        } else {
            x = 0;
        }
        ctx.arc(80, 80, 50, 0, x, false); // 顺时针
        ctx.stroke();
        ctx.beginPath();
        ctx.strokeStyle = '#000';
        ctx.arc(200, 80, 50, 0, x, true); // 逆时针
        ctx.stroke();
        requestAnimationFrame(function () {
            draw(ctx, x);
        });
}

requestAnimationFrame(function () {
        draw(ctx1, 0);
});

效果如下：

代码上看，就是不断增加endAngle，顺时针还好理解，但是逆时针就有点不一样了，可以看到逆时针的画法一开始就把圆整个形状画好了，然后却是慢慢的减小绘画区域。

这里我们首先要明白startAngle为0的时候是在圆的右侧经过圆心的水平线和圆的交点处。也就是3点钟那个地方。然后不管顺时针还是逆时针，endAngle都是同一个地方(有种说废话的赶脚)，所以，顺时针就是按顺时针方向从startAngle走到endAngle，而逆时针是从逆时针方向走，所以才有一开始逆时针就画完了整个圆，然后才慢慢退回去。

另外，这种通过requestAnimationFrame来不不停画东东的方法，就是Canvas动画的基本实现原理了。

moveTo

还有个需要注意的就是moveTo这个方法，这个方法是将画笔移动到某个坐标处，move的过程中不会产生路径，所以可以用来画一些不连续的路径，比如之前我们画的两个圆，用了ctx.moveTo(170, 120);。为什么一定是这个坐标呢，这个坐标是圆的起始点，我们可以尝试换一下，会发现从moveTo之后的位置到下次起笔的位置会多一条连接线。

比如上面例子中使用ctx.moveTo(170, 170)就会如下图：

可以得出，当moveTo之后的点和下一次开始绘制的点不重合时，就会出现一条直线连接这两点，为了避免这种情况，moveTo移动的点最好跟下一次绘制的开始点重合。

总结

Canvas的内容比较多，涉及到画矩形，圆形，各种图形，线条，画图片，动画，像素点处理，粒子动画，贝塞尔曲线甚至包含构建三维空间，VR视频等等，上文只是简单介绍了Canvas画图基础的几个小点，更多的内容以后慢慢写。现就上面的内容简单做个总结：

  1. Canvas可以画各种东西，但除了矩形，其它的都是要依靠路径来画的。
  2. 画新的路径之前最好使用beginPath方法，这样不容易影响之前的路径。
  3. 画圆是从startAngle开始到endAngle结束，走的方向有顺时针和逆时针的差别。
  4. moveTo的点最好和下次开始绘画的点重合，这样避免不必要的线条。

源码地址：https://github.com/bob-chen/canvas-demo/tree/master/basic

参考

http://www.w3school.com.cn/html5/html_5_canvas.asp

canvas

0 人点赞