HTML5 <canvas> 元素
HTML5 引入了 <canvas> 元素，使得在网页中绘制图形变得更加容易。通过 <canvas>，你可以动态地绘制图像、图表、动画和其他图形内容。它提供了一个固定大小的区域，你可以使用 JavaScript 访问并绘制。
1. 基本语法
<canvas id="myCanvas" width="500" height="400">
您的浏览器不支持Canvas元素。
</canvas>
id：指定<canvas>元素的唯一标识符。width：指定画布的宽度，默认值为 300px。height：指定画布的高度，默认值为 150px。
如果浏览器不支持 <canvas> 元素，<canvas> 标签中的文本内容会显示出来。
2. 获取 2D 绘图上下文
绘制图形需要通过 JavaScript 获取到画布的绘图上下文。常见的上下文类型是 2D 和 WebGL。下面是获取 2D上下文的代码：
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
</script>
getContext("2d")：用于获取 2D 渲染上下文，它提供了绘制图形的多种方法。getContext("webgl")：用于获取 WebGL 渲染上下文，支持 3D 图形绘制。
3. 绘制基本形状
通过 2D 上下文，你可以绘制各种基本形状，如矩形、圆形、线条、文本等。
1. 绘制矩形
// 绘制填充矩形
ctx.fillStyle = "blue"; // 设置填充颜色
ctx.fillRect(50, 50, 150, 100); // 参数：x, y, width, height
// 绘制空心矩形
ctx.strokeStyle = "red"; // 设置边框颜色
ctx.strokeRect(250, 50, 150, 100); // 参数：x, y, width, height
// 清空矩形区域
ctx.clearRect(100, 100, 50, 50); // 参数：x, y, width, height
2. 绘制圆形
// 绘制填充圆形
ctx.beginPath(); // 开始路径
ctx.arc(200, 200, 50, 0, 2 * Math.PI); // 参数：圆心x, 圆心y, 半径, 起始角度, 结束角度
ctx.fillStyle = "green";
ctx.fill(); // 填充圆形
// 绘制空心圆形
ctx.beginPath();
ctx.arc(400, 200, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "purple";
ctx.stroke(); // 绘制圆形的边框
3. 绘制直线
// 绘制直线
ctx.beginPath();
ctx.moveTo(50, 300); // 起始点
ctx.lineTo(450, 300); // 结束点
ctx.strokeStyle = "orange";
ctx.stroke(); // 绘制路径
4. 绘制文字
// 绘制文本
ctx.font = "30px Arial"; // 设置字体大小和字体
ctx.fillStyle = "black"; // 设置文本颜色
ctx.fillText("Hello, Canvas!", 100, 100); // 参数：文本, x, y
4. 渐变和阴影
1. 线性渐变
// 创建线性渐变
var grd = ctx.createLinearGradient(0, 0, canvas.width, 0); // 创建一个从左到右的渐变
grd.addColorStop(0, "red"); // 渐变起始颜色
grd.addColorStop(1, "blue"); // 渐变结束颜色
// 使用渐变填充矩形
ctx.fillStyle = grd;
ctx.fillRect(50, 150, 400, 100);
2. 径向渐变
// 创建径向渐变
var grd = ctx.createRadialGradient(300, 200, 50, 300, 200, 200); // 创建一个从圆心扩展的渐变
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "green");
// 使用渐变填充圆形
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(300, 200, 150, 0, 2 * Math.PI);
ctx.fill();
3. 添加阴影
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // 设置阴影颜色
ctx.shadowBlur = 10; // 设置阴影的模糊程度
ctx.shadowOffsetX = 5; // 设置阴影在X轴的偏移
ctx.shadowOffsetY = 5; // 设置阴影在Y轴的偏移
// 绘制带阴影的矩形
ctx.fillStyle = "orange";
ctx.fillRect(50, 50, 150, 100);
5. 路径和贝塞尔曲线
1. 绘制路径
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.lineTo(250, 50);
ctx.closePath();
ctx.stroke(); // 绘制路径
2. 贝塞尔曲线
// 绘制二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 200); // 起始点
ctx.quadraticCurveTo(200, 100, 400, 200); // 控制点和结束点
ctx.stroke();
// 绘制三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.bezierCurveTo(150, 150, 250, 350, 350, 250); // 控制点和结束点
ctx.stroke();
6. 动画效果
通过 requestAnimationFrame() 方法，可以实现更平滑的动画效果。下面是一个简单的动画示例：
var x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(x, 200, 50, 0, 2 * Math.PI);
ctx.fill();
x += 2; // 更新x坐标
if (x > canvas.width) x = 0; // 重置x坐标
requestAnimationFrame(animate); // 请求下一帧
}
animate(); // 启动动画
7. 导出和导入图像
1. 导出 Canvas 内容为图片
var dataURL = canvas.toDataURL(); // 将canvas内容导出为图片的Data URL
console.log(dataURL); // 打印出Base64编码的图片数据
2. 导入图片到 Canvas
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 将图片绘制到canvas上
};
img.src = "image.jpg"; // 设置图片路径
总结
HTML5 <canvas> 元素是一个强大的工具，允许你在网页上绘制图形、制作动画和图表。它的用途非常广泛，涵盖了游戏开发、数据可视化、图像处理等领域。通过配合 JavaScript，你可以轻松地创建交互性强、动态的网页内容。
发表回复