HTML5 – 画布(Canvas)

HTML5中的Canvas是一个卓越的功能，它可以用于动态生成图形、创建动画和游戏。Canvas是HTML5中的一个绘图API，它允许你在浏览器中以及其他HTML文档上绘制2D图形。

准备工作

首先，我们需要一个Canvas元素，它是一个HTML5元素，它可通过JavaScript获取并用于绘图。

<!-- 创建一个Canvas元素 -->
<canvas id="myCanvas" width="400" height="400"></canvas>

我们也需要一个JavaScript函数来绘制元素。

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
// 获取绘制Context
var ctx = canvas.getContext("2d");
// 开始绘制
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

这里我们使用的是2D上下文getContext("2d")，它是Canvas API的一部分，用于绘制2D图形。

绘制线条

现在，我们将使用Canvas API来绘制一条线。

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
// 获取绘制Context
var ctx = canvas.getContext("2d");
// 开始绘制
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

以上示例获取了Canvas元素，并创建了2D上下文，然后使用moveTo()和lineTo()方法绘制了一条线。最后，使用stroke()方法使线条可见。

绘制圆形

接下来，我们来看看如何用Canvas API绘制一个圆。

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
// 获取绘制Context
var ctx = canvas.getContext("2d");
// 开始绘制
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

以上代码使用了arc()方法来绘制一个圆。参数分别为：x、y坐标定位圆的中心，半径，起始角度以及结束角度。

绘制文本

Canvas也可以用于绘制文本，例如文字和数字。

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
// 获取绘制Context
var ctx = canvas.getContext("2d");
// 开始绘制
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

以上代码定义了文本字体和大小，然后绘制了一组文本。

渐变填充

Canvas API支持渐变填充，意味着我们可以按照我们的需要使用渐变填充某个区域。

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
// 获取绘制Context
var ctx = canvas.getContext("2d");
// 创建渐变
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "white");
// 开始绘制
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 100);

以上代码创建了一个线性渐变对象，并添加了两个色断点，然后使用fillRect()方法来绘制一个填充了渐变色的矩形。