HTML5绘图基础_07_绘制第二个图形
2016-01-16 23:48
471 查看
如何在画布上连续绘制两个图形呢？
我们需要在每次的图形前后添加beginPath和closePath方法即可。并且每次绘制需要调用stroke方法。
代码如下：
效果：
我们需要在每次的图形前后添加beginPath和closePath方法即可。并且每次绘制需要调用stroke方法。
代码如下：
context.beginPath(); context.moveTo(100,100); context.lineTo(100,400); context.lineTo(400,400); context.lineTo(100,100); context.closePath(); context.strokeStyle = "red"; context.lineWidth = 5; context.stroke(); context.beginPath(); context.moveTo(100,100);//重新移动 context.lineTo(400,100); context.lineTo(600,300); context.lineTo(100,100); context.closePath(); context.strokeStyle = "blue"; context.lineWidth = 2; context.stroke();
效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- 使用canvas实现仿新浪微博头像截取上传功能
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- HTML5实现微信拍摄上传照片功能
- jQuery+HTML5加入购物车代码分享
- jQuery mobile 移动web(6)
- 基于Jquery和html5的7款个性化地图插件
- 实现音乐播放器的代码（html5+css3+jquery）
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML5绘图基础_06_既填充区域又绘制线条