 |
位置：电子教程 > HTML5入门电子教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > HTML5入门电子教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：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 文本 |
