当前阅读教程:HTML5入门电子教程 > Canvas 路径 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Canvas 坐标 | 下一篇: Canvas 文本 |
在Canvas上画线,我们将使用以下两种方法: n moveTo(x,y) 定义线条开始坐标 n lineTo(x,y) 定义线条结束坐标 绘制线条我们必须使用到 "ink" 的方法,就像stroke(). 示例:绘制线条定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条,示例 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas - 路径-线条</title> </head> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script>
</body>
</html> 效果如图7-4。 示例:绘制圆形在canvas中绘制圆形, 我们将使用以下方法: arc(x,y,r,start,stop) 实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill(). 使用 arc() 方法 绘制一个圆,下面我们来看下在网页中的效果,示例 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas - 路径-圆形</title> </head> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script>
</body>
</html> 效果如图7-5。 |
|
上一篇: Canvas 坐标 | 下一篇: Canvas 文本 |