HTML5:canvas画布上画连续曲线_H5之家 - 中国HTML5教程资源分享第一站

首先页面设置一个canvas的画布标签，代码形如：

<!DOCTYPE HTML> <html> <head> <title>Canvas画布画连续曲线 </head> <body> <canvas>您的浏览器不支持 HTML5 canvas 标签。</canvas> </body> </html>

其次，通过JS去控制这个画布myCanvas：

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(188, 150); ctx.quadraticCurveTo(288, 0, 388, 150); ctx.lineWidth = 1; //曲线宽度 // 设置曲线颜色 ctx.strokeStyle = 'green'; ctx.stroke(); //继续画曲线 ctx.beginPath(); ctx.moveTo(388,150); ctx.quadraticCurveTo(480,0,588,150); ctx.lineWidth = 1; ctx.strokeStyle = "orange"; ctx.stroke();

代码解释：

1、通过getContext("2d")声明将会在此画布上进行二维作画；

2、beginPath():开始绘制路径，或者重置绘制路径，如果重新开启一条路径，重新开始的意思。

3、moveTo(x,y):表示将画笔移动至画布的x,y这个坐标点，画布的X和y轴朝向是这样子的

Canvas画布的x和y轴的方向示意图

4、quadraticCurveTo(cx,cy,x2,y2)：方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点，cx,cy就是控制点用来控制曲线弯曲的程度，（x2,y2)表示线条的终点坐标。

5、lineWidth：可设置线条粗细，单位为px。

6、strokeStyle：可设置线条的颜色；

7、stroke（）：执行绘制任务。

HTML5，Canvas，画布，quadraticCurveTo，曲线，控制点，moveTo，strokeStyle，stroke

可以扫描本站该帖子的QR二维码进行访问

本站该帖子的QR二维码