canvas教程

详述canvas(一)(2)

字号+ 作者:H5之家 来源:H5之家 2017-08-05 10:01 我要评论( )

了解一下canvas中两个重要的方法:beginPath()和closePath(); beiginPath()开始一段新路径 canvas中的绘制方法(如stroke,fill),都是以”上一次的beiginPath”之后的所有路径为基础进行绘制。 如下: == = " var pale

了解一下canvas中两个重要的方法:beginPath()和closePath();
beiginPath()开始一段新路径
canvas中的绘制方法(如stroke,fill),都是以”上一次的beiginPath”之后的所有路径为基础进行绘制。
如下:

==>> = "> > var palette = document.querySelector("#palette").getContext("2d");//设置绘图环境 palette.beginPath(); palette.moveTo(50,20); palette.lineTo(250,20); palette.stroke(); palette.moveTo(50.5,40.5); palette.lineTo(250.5,40.5) palette.strokeStyle = '#f00'; palette.stroke(); </script>

得到的是两条红线,而并非是一条黑线,一条红线。
并且,仔细观察,我们还会发现,第一条直线的宽度要比第二条宽度要宽。这是因为canvas的每条线都有一条无限细的中线,线条的宽度是从中线向两侧延伸的,因为计算机是不允许小于1px的图形的,因此延伸后的宽度变成了2px.Canvas中的line把中线与像素的起点对齐了,而不是像素的中间点。为了解决这个问题,我们让线条的中线和像素的中间点对齐,如本例中的第二条曲线的画法。另外,对于lineWidth>1的线,我们可以忽略这个问题,只有线宽为1px的时候,这个问题最明显。

这里写图片描述

  • 不管你用moveTo把画笔移动到哪里,只要不beginPath,那你一直都是在画一条路径。
  • fillRect与strokeRect这种直接画出独立区域的函数,也不会打断当前的path.
    如果你画出的图形和你想像的不一样,记得查看是否有合理的
  • 说到beiginPath,就不得不提及closePath();
    必须要注意的一点是:closePath()的作用不是结束路径,而是关闭路径,它会试图从当前路径的重点连一条路径到起点,让整个路径闭合起来。但是,这并不意味着它之后的路径就是新路径了。
    如上面的例子,即使我们在第一个stroke之后,加上一句closePath()也不会出现一红一黑的线,但是如果我们在第一个stroke之后,加上一句beginPath(),可以如愿以偿的得到2个
    不要企图通过闭合现有路径来开始一条新路径,而开始一条新路径,以前的路径也不会闭合。 因此在适当的地方开启新路径和闭合路径。

     

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

    相关文章
    • 用Canvas + WASM画一个迷宫

      用Canvas + WASM画一个迷宫

      2017-08-05 11:00

    • 体验HTML5 Canvas对象的强大 五款在线绘图应用示例

      体验HTML5 Canvas对象的强大 五款在线绘图应用示例

      2017-08-05 10:00

    • Android canvas绘制柱形统计图

      Android canvas绘制柱形统计图

      2017-08-05 09:02

    • HTML5 file API加canvas实现图片前端JS压缩并上传

      HTML5 file API加canvas实现图片前端JS压缩并上传

      2017-08-04 18:01

    网友点评
    <