码迷,mamicode.com
首页 > 其他好文 > 详细

canvas二次贝塞尔&三次贝塞尔操作实例

时间:2019-09-09 22:32:37      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:his   link   ref   sed   mamicode   dem   alt   log   nbsp   

技术图片

 

 

Canvas Quadratic Curve Example

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.quadraticCurveTo(250, 100, 400, 250);
ctx.stroke();

This demonstration shows how quadratic curves can be drawn on a canvas element. Drag the line ends or the control point to change the curve.

For more information, please refer to:
How to Draw Quadratic Curves on an HTML5 Canvas

See also:
How to Draw Bezier Curves on an HTML5 Canvas

Disclaimer

The code was developed by Craig Buckler of OptimalWorks.net for SitePoint.com.

This code can be used without any restrictions but please don‘t expect 24/7 support! A link back to SitePoint.com is appreciated.

 

 

 

三次:

技术图片

 

canvas二次贝塞尔&三次贝塞尔操作实例

标签:his   link   ref   sed   mamicode   dem   alt   log   nbsp   

原文地址:https://www.cnblogs.com/rickdiculous/p/11494583.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!