首页 相关文章 html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点

html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点

如果你还不知道Canvas是什么,可以看看上一篇.
在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形。在Canvas中也是如此。
在开始之前我们先拿出画布和画笔:

代码如下:

var cvs = document.getElementById('cvs'); //画布
var ctx = cvs.getContext('2d'); // 画笔

我们画画的时候,落笔点是不固定的,随时都会变。canvas虽然不是通过手来决定落笔点,但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布,然后移动到指定的点(即坐标)。

代码如下:

ctx.moveTo(x,y)

此过程中不会画出任何图形,相当于你提着笔在画布上晃来晃去。
但晃来晃去是没用的,我们必须开始画。先画最简单的:直线
画直线的方法即lineTo,他的参数和moveTo一样的,都是一个点。
ctx.lineTo(x,y)当然,你画线的时候,落笔点也跟着移动了,所以lineTo之后落笔点就...[ 查看全文 ]

2016-02-19 标签:

html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点的相关文章

手机页面
收藏网站 回到头部