Canvas入门(一)

七、路径

Canvas中的路径代表你希望呈现的任何形状。上边的对角线就是一条路径,beginPath就说明是要开始绘制路径了。实际上,路径可以要多复杂有多复杂:多条线、曲线段,甚至是子路径。如果想要在canvas中绘制任意形状那么我们需要来关注一下路径的API。

一般的,开始绘制图形之前,第一个就要调用beginPath。这和函数不带任何参数,它用来通知canvas将要开始绘制一个新的图形了。对于canvas来说,beginPath函数的最大用处是canvas需要根据此来计算图形的内部和外部的范围,以便完成后续的描边和填充。

路径会跟踪当前坐标,默认值是原点。Canvas本身也跟踪当前坐标,不过可以通过绘制代码来修改。

调用beginPath后,就可以用context的各种方法来绘制想要的形状了。到目前为止,我们已经用到了几个简单的context路径函数。

  • moveTo(x,y):不绘制,只是将当前位置移动到新的目标坐标(x,y)。
  • lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。

下一个特殊的路径函数叫做closePath。这个函数的行为同lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图像已经闭合或者形成了完全封闭的区域,自对将来的填充和描边都非常有用。

此时可以在已有的路径中继续创建其他子路径,或者随时调用beginPath重新绘制新路径并完全清除之前所有的路径。

下边我们尝试着绘制一个松树的路径(注意这里画布调到了300 X 300):

window.onload = function(){

var canvas = document.getElementById(“square”);

var context = canvas.getContext(“2d”);

context.save();

context.translate(130,250);

//开始绘制

//绘制树冠

context.beginPath();

context.moveTo(-25,-50);

context.lineTo(-10,-80);

context.lineTo(-20,-80);

context.lineTo(-5,-110);

context.lineTo(-15,-110);

//树的顶点

context.lineTo(0,-140);

context.lineTo(15,-110);

context.lineTo(5,-110);

context.lineTo(20,-80);

context.lineTo(10,-80);

context.lineTo(25,-50);

//连接起点,闭合路径

context.closePath();

//绘制当前路径

context.stroke();

context.restore();

};

上边的代码实际上使用的依然是前面用过的移动和画线的命令,只不过调用的次数多了一些。这几条线表现出了一棵松树的轮廓,最后我们闭合了路径。

八、边框样式:

 

我们还可以通过通过代码来设置边框的样式,让绘制的图形更好看。

//连接起点,闭合路径

context.closePath();

//加宽线条

context.lineWidth = 4;

//平滑路径的接合点

context.lineJoin = ’round’;

//将颜色改为绿色

context.strokeStyle = ‘green’;

//绘制当前路径

context.stroke();

设置这些属性可以改变以后要绘制的图形的外观,这个外观起码可以保持到我们将context恢复到上一个状态。

首先,我们将线条宽度加粗到4像素。

其次,我们将lineJoin属性设置为round,主要用来修改连接方式,是拐角变的更加圆滑。

最后,通过strokeStyle属性改变了线条的颜色。

 

 

本教程由尚硅谷教育大数据研究院出品,如需转载请注明来源,欢迎大家关注尚硅谷公众号(atguigu)了解更多。

 


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)