一、基本概念
1、Canvas 2D的引入
Canvas是HTML5中的一个新元素,它是由W3C提出的标准,最初是由Apple公司提出。Canvas可以提供基于像素的绘图系统,支持2D图形,能够呈现任何复杂度的图形,它为开发者提供了直接操作像素的能力。
<canvas id="myCanvas" width="300" height="300"></canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
2、Canvas 2D的核心概念
Canvas 2D的核心概念是:canvas、context、path、stroke和fill。canvas是一个类似画布的东西,context是绘制上下文,它是一个对象,提供一系列方法进行绘图;path是用来构造图形的对象,包括各种直线、曲线和圆弧等;stroke是画线,fill是填充。
ctx.beginPath(); // 开始路径
ctx.moveTo(50, 50); // 移动起点
ctx.lineTo(200, 200); // 连接终点
ctx.stroke(); // 画线
二、图形绘制
1、绘制直线
Canvas 2D提供了绘制直线的方法,开发者可以使用moveTo方法指定起点,使用lineTo方法连接终点,使用stroke方法画线。
// 画一条45度的线
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.stroke();
2、绘制圆弧
Canvas 2D提供了绘制圆弧的方法,开发者可以使用arc方法指定圆心、半径、起始角度和结束角度,使用stroke方法画线,使用fill方法填充。
// 画一个圆
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.stroke();
// 画一个实心圆
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.fill();
3、绘制矩形
Canvas 2D提供了绘制矩形的方法,开发者可以使用rect方法指定左上角的坐标和矩形的宽度和高度,使用stroke方法画线,使用fill方法填充。
// 画一个矩形
ctx.strokeRect(100, 100, 100, 100);
// 画一个实心矩形
ctx.fillRect(100, 100, 100, 100);
三、路径绘制
1、绘制路径
Canvas 2D提供了绘制路径的方法,开发者可以使用beginPath方法开始一条路径,使用moveTo方法移动到路径的起点,使用lineTo方法连接路径的每一个点,使用closePath方法关闭路径。
// 画一个四边形
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
2、填充样式
Canvas 2D提供了填充样式的方法,开发者可以使用fillStyle属性设置填充颜色,也可以使用gradient方法创建渐变色填充。
// 实心矩形
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);
// 渐变色矩形
var grd = ctx.createLinearGradient(100, 100, 200, 200);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'blue');
ctx.fillStyle = grd;
ctx.fillRect(100, 100, 100, 100);
四、图像处理
1、绘制图像
Canvas 2D提供了绘制图像的方法,开发者可以使用drawImage方法将图片或者视频等媒体文件绘制到canvas上。
// 将一张图片绘制到canvas上
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = 'image.jpg';
2、图像处理
Canvas 2D提供了对图像进行处理的方法,开发者可以使用save方法保存当前状态,使用translate方法移动坐标系,使用rotate方法旋转坐标系,使用scale方法缩放坐标系,使用clip方法进行裁剪。
// 图像处理
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);
ctx.scale(2, 2);
ctx.clip();
ctx.drawImage(img, 0, 0);
ctx.restore();
五、文字处理
1、绘制文字
Canvas 2D提供了绘制文字的方法,开发者可以使用fillText方法或者strokeText方法绘制文字。
// 绘制文字
ctx.font = '48px serif';
ctx.fillText('Hello, world!', 10, 50);
2、文字样式
Canvas 2D提供了文字样式的方法,开发者可以使用font属性设置字体大小和字体类型,使用textBaseline属性设置对齐方式。
// 设置文字样式
ctx.font = '48px serif';
ctx.textBaseline = 'middle';
ctx.fillText('Hello, world!', 10, 50);
六、动画处理
1、绘制动画
Canvas 2D提供了绘制动画的方法,开发者可以使用requestAnimationFrame方法创建动画帧。
// 绘制动画
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清楚画布
ctx.fillRect(x, 50, 50, 50); // 绘制矩形
x += 10; // 更新坐标
if (x > canvas.width) {
x = 0;
}
requestAnimationFrame(draw); // 不断绘制
}
var x = 0;
draw();
2、动画处理
Canvas 2D提供了对动画进行处理的方法,开发者可以使用setInterval方法或者setTimeout方法设置动画帧之间的间隔。
// 设置动画帧间隔
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清楚画布
ctx.fillRect(x, 50, 50, 50); // 绘制矩形
x += 10; // 更新坐标
if (x > canvas.width) {
x = 0;
}
}, 100);
七、总结
Canvas 2D是HTML5中非常重要的一部分,它可以用来绘制各种各样的图形和动画,对于Web开发者来说,Canvas 2D的掌握是非常重要的。