用Canvas绘制贝赛尔曲线
要创建一个HTML5的画布——贝塞尔曲线,我们可以使用bezierCurveTo()方法。Bezier曲线定义点有两个控制点和一个结束点。与二次曲线相比,Bezier曲线定义有两个控制点,而不是一个,使您能够创建更复杂的曲线。
具体代码如下:
案例的JavaScript代码:
关于为什么要使用这些代码,我们用一张图片来解释一下:
贝塞尔曲线的定义是由当前的上下文和两个控制点以及结束点控制的。曲线的第一部分是切向的假想线,是由上下文点和第一个控制点定义。第二部分的曲线相切的假想线,是第二个控制点和结束点定义。
转自我爱猫猫技术博客
具体代码如下:
- context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
案例的JavaScript代码:
- window.onload = function(){
- var canvas = document.getElementById("myCanvas");
- var context = canvas.getContext("2d");
- context.moveTo(188, 130);
- var controlX1 = 140;
- var controlY1 = 10;
- var controlX2 = 388;
- var controlY2 = 10;
- var endX = 388;
- var endY = 170;
- context.bezierCurveTo(controlX1, controlY1, controlX2
- controlY2, endX, endY);
- context.lineWidth = 10;
- context.strokeStyle = "black"; // line color
- context.stroke();
- };
关于为什么要使用这些代码,我们用一张图片来解释一下:
贝塞尔曲线的定义是由当前的上下文和两个控制点以及结束点控制的。曲线的第一部分是切向的假想线,是由上下文点和第一个控制点定义。第二部分的曲线相切的假想线,是第二个控制点和结束点定义。
转自我爱猫猫技术博客
【用Canvas绘制贝赛尔曲线】相关文章
7. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形
8. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形
10. HTML5每日一练之Canvas标签的应用-绘制圆形
本文来源:https://www.51html5.com/a641.html
﹝用Canvas绘制贝赛尔曲线﹞相关内容
- HTML5每日一练之Canvas标签的应用-绘制向日葵
- HTML5每日一练之Canvas标签的应用-绘制线性渐变图形
- 在HTML5的CANVAS上绘制椭圆的几种方法
- 绘制SVG内容到Canvas的HTML5应用
- HTML5 Canvas中绘制矩形实例教程
- HTML5的绝活:巧用Canvas制作会动的时钟
- 使用Canvas和JavaScript创建逼真的下雨效果
- Canvas Invaders
- HTML5每日一练之Canvas标签的应用-在页面上放置Canvas
- CSS3绘制的腾讯QQ企鹅Logo