HTML Canvas 完整参考

HTML Canvas是HTML5中新增的一个标签，允许开发者使用画布来实现Web页面中的图形绘制、图像处理、动画制作等功能。本篇完整参考将介绍HTML canvas的基本概念、常用属性和方法，以及示例代码。

基本概念

Canvas是一块矩形区域，可以通过JavaScript来控制它的每一个像素点，实现各种动态和静态图形的渲染。以下是HTML Canvas的一些基本概念：

• canvas: HTML Canvas标签；
• context: 表示一个画布上下文，通过该对象进行绘制和处理；
• width 和 height: canvas的宽度和高度，单位为像素；
• fillStyle 和 strokeStyle: 用于设置填充和描边的颜色、渐变或图案；
• lineWidth 和 lineCap: 用于设置线条粗细和端点的形状；
• textAlign 和 textBaseline: 用于设置文本的对齐方式和基线位置；
• beginPath() 和 closePath(): 用于开始和结束绘制路径；
• moveTo() 和 lineTo(): 用于移动绘制起点和绘制路径；
• arc() 和 rect(): 用于绘制圆和矩形路径；
• fill() 和 stroke(): 用于填充和描边当前路径；
• clearRect(): 用于清除指定区域。

常用属性和方法

标签属性

<canvas id="myCanvas" width="500" height="500"></canvas>

• id: canvas标签的唯一标识符；
• width 和 height: canvas的宽度和高度，单位为像素。

画布上下文属性

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.shadowColor = "gray";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;

• fillStyle: 设置填充颜色、渐变或图案；
• strokeStyle: 设置描边颜色、渐变或图案；
• lineWidth: 设置线条粗细；
• lineCap: 设置线条端点的形状；
• shadowColor: 设置阴影颜色；
• shadowBlur: 设置阴影模糊程度；
• shadowOffsetX 和 shadowOffsetY: 设置阴影偏移量。

路径绘制方法

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.arc(x, y, r, startAngle, endAngle, counterclockwise);
ctx.rect(x, y, width, height);
ctx.closePath();

• beginPath(): 开始绘制路径；
• moveTo(x, y): 移动绘制起点；
• lineTo(x, y): 在当前路径中添加一个线段；
• arc(x, y, r, startAngle, endAngle, counterclockwise): 在当前路径中添加一个圆弧；
• rect(x, y, width, height): 在当前路径中添加一个矩形；
• closePath(): 结束绘制路径，将当前点和起点连线。

绘制方法

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillRect(x, y, width, height);
ctx.strokeRect(x, y, width, height);
ctx.clearRect(x, y, width, height);
ctx.fill();
ctx.stroke();

• fillRect(x, y, width, height): 绘制一个填充的矩形；
• strokeRect(x, y, width, height): 绘制一个矩形的边框；
• clearRect(x, y, width, height): 清除指定区域；
• fill(): 填充当前路径；
• stroke(): 描边当前路径。

文本绘制方法

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.textAlign = "center";
ctx.fillText("Hello, world!", x, y);
ctx.strokeText("Hello, world!", x, y);

• font: 设置文本字体大小和样式；
• textAlign: 设置文本的对齐方式；
• textBaseline: 设置文本的基线位置；
• fillText(text, x, y): 在指定位置填充文本；
• strokeText(text, x, y): 在指定位置描边文本。

示例代码

下面是一些常用的HTML Canvas代码示例。

绘制矩形

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 200, 100);

绘制圆形

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2, true);
ctx.fillStyle = "blue";
ctx.fill();

绘制文本

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.textAlign = "center";
ctx.fillText("Hello, world!", 250, 100);

绘制路径

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 150);
ctx.lineTo(150, 50);
ctx.closePath();

ctx.lineWidth = 5;
ctx.strokeStyle = "green";
ctx.stroke();

绘制图片

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.src = "image.jpg";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

以上是HTML Canvas的完整参考，更多细节请查看官方文档。