首页 > 代码库 > HTML5之canvas 4 绘制曲线
HTML5之canvas 4 绘制曲线
一、圆弧
(x0,y0)当前坐标点，（x1,y1）控制点坐标，（x2,y2）圆弧终点坐标
Context.arcTo(x1,y1,x2,y2,radiusX)
二、二次贝塞尔曲线
开始点：moveTo(20,20)
控制点 1：quadraticCurveTo(20,100,200,20)
结束点：quadraticCurveTo(20,100,200,20)
Context. quadraticCurveTo(cpx,cpy,x,y)
(cpx,cpy)控制点坐标，（x,y）终点坐标
三、三次贝塞尔曲线
开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
结束点：bezierCurveTo(20,100,200,100,200,20)
Context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
(cp1x,cp1y)第一个控制点，（cp2x,cp2y）第二个控制点，（x,y）终点
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>圆弧-二次贝塞尔曲线-三次贝塞尔曲线</title> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 7 </head> 8 <body> 9 <canvas id="canvas" width="500" height="500"></canvas>10 <script type="text/javascript">11 var oCanvas = document.getElementById("canvas");12 var context = oCanvas.getContext("2d");13 context.fillStyle = "#ededed";14 context.fillRect(0, 0, 500, 500);15 //圆弧16 context.beginPath();//开始点17 context.moveTo(140,100);//X0Y0:起点，更改X0可控制18 context.arcTo(160,100,160,140,20);//X1Y1控制点：,X2Y2：终点,半径19 context.stroke();20 context.closePath();//结束点21 //二次贝塞尔曲线22 context.beginPath();//开始23 context.moveTo(200,200);//开始点24 context.quadraticCurveTo(240,300,400,160);//(cpx,cpy,x,y)：(cpx,cpy)控制点坐标，（x,y）终点坐标25 context.stroke();//描边26 context.closePath();//关闭27 //三次贝塞尔曲线28 context.beginPath();//开始29 context.moveTo(400,400);//开始点30 context.quadraticCurveTo(440,300,300,160,100,260);//(cp1x,cp1y,cp2x,cp2y,x,y):(cp1x,cp1y)第一个控制点，（cp2x,cp2y）第二个控制点，（x,y）终点31 context.stroke();//描边32 context.closePath();//关闭33 </script>34 </body>35 </html>
HTML5之canvas 4 绘制曲线
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。