Canvas绘图技巧-优快云博客

上篇canvas教程传送： canvas初相识

上一篇文章最后有讲了如何绘制一个三角形，其实在canvas中有一些图形的绘制有着直接的方法实现。

绘制矩形

绘制一个矩形的边框：strokeRect（x，y，width，height）

绘制一个填充的矩形：fillRect（x，y，width，height）

清除指定矩形区域，让清除部分完全透明：clearRect（x，y，width，height）

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.strokeRect(50, 50, 50, 50);
ctx.closePath();

ctx.beginPath();
ctx.fillRect(150, 50, 50, 50);
ctx.closePath();

ctx.beginPath();
ctx.fillRect(250, 50, 50, 50);
ctx.clearRect(265, 65, 20, 20);
ctx.closePath();

绘制出来的图形是这样的

以上代码又出现一个新东西，beginPath() 和 closePath() 。

beginPath()：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()：闭合路径之后图形绘制命令又重新指向到上下文中。

绘制圆弧

使用 arc()方法绘制圆弧或圆。

arc() 语法：arc(x，y，radius，startAngle，endAngle，anticlockwise)。画一个以（x，y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。其中，startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

这里具体讲解一下，弧度的问题。

顺时针方向，从0开始的地方，需要多大的弧度就走多少的 π ，JS中 Math.PI 就是 π 。

ctx.beginPath();
ctx.arc(50,50,20,0,Math.PI*0.5,false);
ctx.stroke();
ctx.closePath();

以上代码绘制了一段弧线，以（50,50）为圆心，20为半径，顺时针从 0 位置画弧到 0.5π 的位置。

绘制二次贝塞尔曲线

贝塞尔曲线一般用来绘制复杂有规律的图形。

绘制二次贝塞尔曲线语法：quadraticCurveTo(cp1x，cp1y，x，y)， cp1x、cp1y为一个控制点， x、y为结束点。

二次贝塞尔曲线有一个开始点、一个结束点（蓝色）以及一个控制点。其实二次贝塞尔曲线还是很常见的，用PPT画图或word时候，应该都使用过曲线这个工具，这就是很典型的二次贝塞尔曲线。

可以使用二次贝塞尔曲线绘制一个气泡框。

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();

效果如下