Canvas 画图基础

2,119 阅读5分钟

画矩形

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

// html


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方法才能绘制出矩形。

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

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

绘制路径

画了矩形再画个圆呗,

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)遍历。

画了一个我们再画一个

ctx.moveTo(170, 120);

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

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

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

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

顺时针和逆时针的区别

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

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

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的点最好和下次开始绘画的点重合,这样避免不必要的线条。

源码地址:github.com/bob-chen/ca…

参考

www.w3school.com.cn/html5/html_…