首页 > 开发 > HTML5 > 正文

HTML5 canvas基本绘图之绘制线段

2024-09-05 07:18:57
字体:
来源:转载
供稿:网友

<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。

<canvas></canvas>只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在<canvas>>元素上绘图主要有三步: 

 1.获取<canvas>元素对应的DOM对象,这是一个Canvas对象;
 2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
 3.调用CanvasRenderingContext2D对象进行绘图。
 
绘制线段moveTo()和lineTo()

以下是一个简单的<canvas>绘图示例:

XML/HTML Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表