当前位置: > > > HTML5 - Canvas的使用样例4(绘制曲线:圆、圆弧、贝塞尔曲线)

HTML5 - Canvas的使用样例4(绘制曲线:圆、圆弧、贝塞尔曲线)

绘制曲线有如下四个方法: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