返回 导航

HTML5 / CSS3

hangge.com

HTML5 - Canvas的使用样例4（绘制曲线：圆、圆弧、贝塞尔曲线）

作者：hangge | 2016-01-19 08:50
绘制曲线有如下四个方法：arc()、artTo()、bezierCurveTo()和quadraticCurveTo()。
第一个比较简单，就是绘制一段圆弧。后面三个方法复杂一些，都需要定义控制点。

1，arc()绘制圆弧
圆弧就是圆上的一部分。要绘制圆弧必须确定：圆形的坐标、圆的半径、圆弧的起点角度和终点角度。
其中起点角度和终点角度都要用弧度表示，即常量pi的倍数（1pi是半圆，2pi是整个圆形）。

（1）下面使用arc()方法绘制一段圆弧：
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;
context.strokeStyle = "#cd2828";

//创建变量,保存圆弧的各方面信息
var centerX = 200;
var centerY = 100;
var radius = 80;
var startingAngle = 0 * Math.PI;
var endingAngle = 1.5 * Math.PI;

//使用确定的信息绘制圆弧
context.arc(centerX, centerY, radius, startingAngle, endingAngle);
context.stroke();

（2）如果在调用stroke()之前调用closePath()，就会在圆弧的起点和终点之间绘制一条直线，得到一个封闭的小半圆。 
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;
context.strokeStyle = "#cd2828";

//创建变量,保存圆弧的各方面信息
var centerX = 200;
var centerY = 100;
var radius = 80;
var startingAngle = 0 * Math.PI;
var endingAngle = 1.5 * Math.PI;

//使用确定的信息绘制圆弧
context.arc(centerX, centerY, radius, startingAngle, endingAngle);
context.closePath();
context.stroke();

（3）如果想画一个整圆，将起点角度设为0，终点角度设为2pi即可。 
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;
context.strokeStyle = "#cd2828";

//创建变量,保存圆弧的各方面信息
var centerX = 200;
var centerY = 100;
var radius = 80;
var startingAngle = 0 * Math.PI;
var endingAngle = 2 * Math.PI;

//使用确定的信息绘制圆弧
context.arc(centerX, centerY, radius, startingAngle, endingAngle);
context.stroke();

2，bezierCurveTo()绘制贝塞尔曲线
贝塞尔曲线之所以流行 ，是因为这种曲线能够保证平滑，哪怕再小、再大的弧度都可以。
一个贝塞尔曲线有两个控制点。曲线的起点切线连接第一个控制点，终点切线连接第二个控制点。两条连接线之间就是曲线。
曲线的弯曲程度（曲率）由控制点与起点和终点的距离决定。距离越远，弯曲度越大（有点像引力，只不过越远力越大）。

（1）下面绘制一条贝塞尔曲线（第一个控制点在起点上放，第二个控制点在终点下方）
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;
context.strokeStyle = "#cd2828";

//把笔移动到起点位置
context.moveTo(20, 150);

//创建变量,保存两个控制点以及曲线终点信息
var control1_x = 187;
var control1_y = 0;
var control2_x = 429;
var control2_y = 380;
var endPointX = 365;
var endPointY = 50;

//绘制曲线
context.bezierCurveTo(control1_x, control1_y, control2_x, control2_y, endPointX, endPointY);
context.stroke();

（2）在线生成贝塞尔曲线
地址：http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html 
我们可以拖动控制点、起点和终点任意改变贝塞尔曲线的形状。同时右侧会实时地生成相应的HTML5绘图代码，真正所见即所得。

评论

全部评论（0）

回到顶部