HTML5 Canvas 学习笔记

一、什么是Canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本（通常是JavaScript）来完成。<canvas> 标签本身只是一个图形容器，所有的绘制工作必须在JavaScript中完成。你可以通过多种方法使用Canvas绘制路径、矩形、圆形、字符以及添加图像。

二、Canvas的基本用法

1. 创建Canvas元素

在HTML页面中，通过<canvas>标签创建一个画布。通常需要指定id属性（便于在JavaScript中引用），以及width和height属性（定义画布的大小）。

HTML复制

<canvas id="myCanvas" width="200" height="100"></canvas>

预览

默认情况下，<canvas>元素没有边框和内容。如果需要，可以通过CSS的style属性添加边框：

HTML复制

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

预览

2. 使用JavaScript绘制图形

Canvas本身没有绘图能力，所有绘制工作必须在JavaScript中完成。以下是基本的绘制步骤：

（1）获取Canvas元素

通过document.getElementById()方法获取Canvas元素：

JavaScript复制

var canvas = document.getElementById("myCanvas");

（2）创建绘图上下文

调用getContext("2d")方法创建一个2D绘图上下文对象：

JavaScript复制

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

getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

（3）绘制图形

使用上下文对象的方法绘制图形。例如，绘制一个红色矩形：

JavaScript复制

ctx.fillStyle = "#FF0000"; // 设置填充颜色
ctx.fillRect(0, 0, 150, 75); // 绘制矩形

3. Canvas坐标系统

Canvas是一个二维网格，左上角坐标为(0,0)。例如，fillRect(0,0,150,75)表示在画布上从左上角(0,0)开始绘制一个宽为150、高为75的矩形。

三、Canvas绘制常见图形

1. 绘制矩形

使用fillRect()方法绘制实心矩形，strokeRect()方法绘制空心矩形。

JavaScript复制

// 实心矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

// 空心矩形
ctx.strokeStyle = "#0000FF";
ctx.strokeRect(0, 0, 150, 75);

2. 绘制路径（线条）

使用moveTo()定义线条开始坐标，lineTo()定义线条结束坐标，stroke()方法绘制线条。

JavaScript复制

ctx.moveTo(0, 0); // 定义开始坐标
ctx.lineTo(200, 100); // 定义结束坐标
ctx.stroke(); // 绘制线条

3. 绘制圆形

使用arc()方法绘制圆形。arc(x,y,r,start,stop)参数分别表示圆心坐标(x,y)、半径r、起始角度start和结束角度stop。

JavaScript复制

ctx.beginPath(); // 开始路径
ctx.arc(95, 50, 40, 0, 2 * Math.PI); // 绘制圆
ctx.stroke(); // 绘制线条

4. 绘制文本

使用fillText()绘制实心文本，strokeText()绘制空心文本。font属性定义字体样式。

JavaScript复制

// 实心文本
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

// 空心文本
ctx.strokeText("Hello World", 10, 50);

5. 渐变效果

使用createLinearGradient()创建线性渐变，createRadialGradient()创建径向渐变。addColorStop()方法添加颜色停止点。

JavaScript复制

// 线性渐变
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

// 径向渐变
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

6. 添加图像

使用drawImage()方法将图像绘制到Canvas上。需要先通过<img>标签加载图像。

JavaScript复制

var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);