前言
我们时常会看到有一些网站有一些可交互的背景墙和验证码，这些是可以通过我们前端画布Cavans来实现的，接下来让我们来了解下前端画布吧。
Cavans简介
Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
<canvas> 标签只有两个属性width和height。这些都是可选的。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素,id是每个Dom元素都拥有的方便js脚本定位。
<canvas id="tutorial" width="150" height="150"></canvas>
js通过Document.getElementById()方法获取HTML <canvas> 元素的引用。接着，通过getContext()方法获取这个元素的context，然后渲染画布。
Cavans图形绘制
我们canvas元素的context后就可以绘制矩形，三角形，直线，圆弧和曲线等复杂的图形。
矩形
-
fillRect(x, y, width, height)：绘制一个填充的矩形 -
strokeRect(x, y, width, height)：绘制一个矩形的边框 -
clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
}
rect(x, y, width, height)：绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。 rect绘制矩形是将一个矩形路径增加到当前路径上，接下来我们来看如何用路径来绘制图形。
用路径来绘制图形
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
- 首先，你需要创建路径起始点。
- 然后你使用画图命令去画出路径。
- 之后你把路径封闭。
- 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
beginPath()：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。closePath()：闭合路径之后图形绘制命令又重新指向到上下文中。stroke()：通过线条来绘制图形轮廓。fill()：通过填充路径的内容区域生成实心的图形。moveTo(x, y)：将笔触移动到指定的坐标x以及y上。lineTo(x, y)： 绘制一条从当前位置到指定x以及y位置的直线。 例如，绘制一个三角形：
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
}
}
圆弧
绘制圆弧或者圆，我们使用arc()方法或者arcTo()方法。
arc(x, y, radius, startAngle, endAngle, anticlockwise)： 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。arcTo(x1, y1, x2, y2, radius)：根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i = 0; i < 4; i++){
for(var j = 0; j < 3; j++){
ctx.beginPath();
var x = 25 + j * 50; // x 坐标值
var y = 25 + i * 50; // y 坐标值
var radius = 20; // 圆弧半径
var startAngle = 0; // 开始点
var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
}
}
