HTML5 Canvas中应用相对路径描画2阶、3阶贝塞尔曲线

日期:2021-02-25 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

在HTML5 Canvas中,能够用下列方式描画3阶和2阶的贝塞尔曲线图:


拷贝编码
编码以下:

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)

贝塞尔曲线图是在2维平面上由1个“起止点”,1个“完毕点”,和1个或好几个“操纵点”界定的曲线图。一般的3阶贝塞尔曲线图应用两个操纵点,而2阶曲线图则只应用1个操纵点。

要描画2阶贝塞尔曲线图,只需设定完毕点的座标和操纵点的座标便可:


拷贝编码
编码以下:

context.moveTo(0,0);
context.quadraticCurveTo(100,25,0,50);

编码实行結果以下:

上面事例中的曲线图从座标(0,0)刚开始,到(0,50)完毕,而用于操纵曲线图勾勒的操纵点的座标为(100,25)。

相比2阶曲线图,因为能够设定两个操纵点,3阶贝塞尔曲线图的描画更加灵便。下面的编码描画了1条”S”形的曲线图:

拷贝编码
编码以下:

context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

译注1:有关贝塞尔曲线图,能够参照Wikipedia上的条目(http://en.wikipedia.org/wiki/Bézier_curve),在其中的动漫很好地诠释了贝塞尔曲线图的转化成体制。

译注2:现阶段HTML5 Canvas最高仅适用3阶贝塞尔曲线图,4阶以上的曲线图尚不适用。

上一篇:html5用video标识流式的载入的完成 返回下一篇:没有了