canvas教程

HTML5绘图基础_07_绘制第二个图形

字号+ 作者:H5之家 来源:H5之家 2017-09-15 12:04 我要评论( )

如何在画布上连续绘制两个图形呢? 我们需要在每次的图形前后添加beginPath和closePath方法即可。并且每次绘制需要调用stroke方法。 代码如下: context.beginPa

如何在画布上连续绘制两个图形呢?

我们需要在每次的图形前后添加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(); 效果:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML学习总结(四)【canvas绘图、WebGL、SVG】

    HTML学习总结(四)【canvas绘图、WebGL、SVG】

    2017-09-15 08:08

  • 行使HTML5 Canvas为图片添补颜色和纹理的教程

    行使HTML5 Canvas为图片添补颜色和纹理的教程

    2017-09-14 17:06

  • HTML5 canvas 在线画笔绘图工具(一)

    HTML5 canvas 在线画笔绘图工具(一)

    2017-09-14 17:03

  • 请教一个屏幕画图问题,呼唤高手!

    请教一个屏幕画图问题,呼唤高手!

    2017-09-14 16:02

网友点评