canvas教程

【canvas学习笔记二】绘制图形(2)

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

效果: 三次曲线的例子我就不说了。反正大家通常肯定不会用这两个方法去绘制图形的。 2D路径对象 实际绘图过程中,常常需要绘制很多路径,其中很多可能是重复的。2D路径对象的作用就是存储重复使用的路径,提高性能

效果:

image


三次曲线的例子我就不说了。反正大家通常肯定不会用这两个方法去绘制图形的。

2D路径对象

实际绘图过程中,常常需要绘制很多路径,其中很多可能是重复的。2D路径对象的作用就是存储重复使用的路径,提高性能,简化代码,新版浏览器都支持。
我先说一下初始化2D路径对象的方法,有三种:

new Path2D(); // empty path object
new Path2D(path); // copy from another Path2D object
new Path2D(d); // path from SVG path data

构造函数可以不含参数,这样创建的就是一个空的路径对象,同样也可以传一个2D路径对象作参数,这样就拷贝了一个2D路径对象,还可以传一段SVG路径数据,比如这样:var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
还是用例子来说明Path2D这个对象比较清楚:

canvas (.())())..

在这个例子中,创建了一个存储了矩形路径的对象,和一个存储了圆的路径对象,结果如下:

image


所有上面说过的路径绘制方法Path2D这个对象都能使用。
另外Path2D这个对象还有一个拼接路径的方法:

Path2D.addPath(path [, transform])
Adds a path to the current path with an optional transformation matrix.

把一段路径传进去就可以将这两段路径拼接起来,带有一个可选参数,是一个SVG变换矩阵。
举个栗子:

ctx p1 ())p2 ())m )........fill(p1);

 

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

相关文章
  • canvas学习总结(6):绘制矩形

    canvas学习总结(6):绘制矩形

    2017-08-04 12:02

  • HTML5 Canvas 画纸飞机组件

    HTML5 Canvas 画纸飞机组件

    2017-08-04 09:00

  • 利用canvas压缩图片

    利用canvas压缩图片

    2017-08-03 17:04

  • nest.js 源码

    nest.js 源码

    2017-08-01 13:06

网友点评
l