HTML5 画布
在本教程中，您将学习如何使用 HTML5 画布元素在网页上绘制图形。
什么是画布？
HTML5 画布元素可用于通过 JavaScript 在网页上绘制图形。 画布最初是由 Apple 为 Mac OS 仪表板小部件和 Safari 网络浏览器中的图形提供动力而引入的。 后来它被 Firefox、Google Chrome 和 Opera 采用。 现在画布是下一代 Web 技术的新 HTML5 规范的一部分。
默认情况下，<canvas> 元素的宽度为 300 像素，高度为 150 像素，没有任何边框和内容。 但是，可以使用 CSS height 和 width 属性定义自定义宽度和高度，而可以使用 CSS border 属性应用边框。
了解画布坐标
画布是一个二维矩形区域。 画布左上角的坐标为 (0, 0) 称为原点，右下角的坐标为 (canvas width, canvas height)。 这里简单演示一下画布默认坐标系。
(0,0)
提示：将鼠标指针放在上面演示的画布区域内，您将获得其当前相对于画布的坐标。 所有主要的网络浏览器都支持 <canvas> 元素，例如 Chrome、Firefox、Safari、Opera、IE 9 及更高版本。
在画布上绘制路径和形状
在本节中，我们将详细了解如何使用新引入的 HTML5 画布元素和 JavaScript 绘制基本路径和形状。
这是在 2D HTML5 画布上绘制路径和形状的基本模板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing on Canvas</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// draw stuff here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>除了从 7 到 11 之外的所有行都非常直截了当。 附加到 window.onload 事件的匿名函数将在页面加载时执行。 页面加载后，我们可以使用 document.getElementById() 方法访问 canvas 元素。 稍后我们通过将 2d 传递给画布对象的 getContext() 方法来定义 2D 画布上下文。
画一条线
您可以在画布上绘制的最基本路径是直线。 用于此目的的最基本方法是 moveTo()、lineTo() 和 stroke()。
moveTo() 方法定义绘图光标在画布上的位置，而 lineTo() 方法用于定义线条终点的坐标，最后 stroke() 方法用于使线条可见。 让我们尝试一个例子:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>绘制弧线
您可以使用 arc() 方法创建弧线。 该方法的语法如下:
以下示例中的 JavaScript 代码将在画布上绘制弧线。
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>绘制一个矩形
您可以使用 rect() 方法创建矩形和正方形。 该方法需要四个参数x、y矩形的位置及其宽度和高度。
rect() 方法的基本语法可以用:
以下 JavaScript 代码将绘制一个以画布为中心的矩形。
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.stroke();
};
</script>画一个圆
没有像矩形的 rect() 方法那样创建圆形的特定方法。 但是，您可以使用 arc() 方法创建一个完全封闭的弧，例如圆形。
使用 arc() 方法绘制完整圆的语法可以用:
下面的示例将绘制一个以画布为中心的完整圆圈。
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.stroke();
};
</script>在描边上应用样式和颜色
描边的默认颜色为黑色，粗细为 1 个像素。 但是，您可以使用 strokeStyle 和 lineWidth 属性分别设置描边的颜色和宽度。
以下示例将绘制一条宽度为 5 像素的橙色线。
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 5;
context.strokeStyle = "orange";
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>您还可以使用 lineCap 属性设置线条的封盖样式。 线帽有三种样式可供选择 — 对接，圆形和方形。 这是一个例子:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle = "orange";
context.lineCap = "round";
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>在画布形状内填充颜色
您还可以使用 fillStyle() 方法在画布形状内填充颜色。
以下示例将向您展示如何在矩形内填充纯色。
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>提示： 在画布上设置形状的样式时，建议在使用 stroke() 方法之前使用 fill() 方法，以便正确渲染笔触。
同样，您也可以使用 fillStyle() 方法在圆圈内填充纯色。
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>在画布形状内填充渐变颜色
您还可以在画布形状内填充渐变颜色。 渐变只是从一种颜色到另一种颜色的平滑视觉过渡。 有两种类型的渐变可用 — 线性 和 径向.
创建线性渐变的基本语法可以用:
以下示例使用 createLinearGradient() 方法在矩形内填充线性渐变颜色。 让我们尝试一下以了解它的基本工作原理:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>同样，您可以使用 createRadialGradient() 方法用径向渐变填充画布形状。 可以通过以下方式给出创建径向渐变的基本语法：
下面的示例使用 createRadialGradient() 方法在圆内填充径向渐变颜色。 让我们尝试一下以了解它的实际工作原理：
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>在画布上绘制文本
您还可以在画布上绘制文本。 这些文本可以包含任何 Unicode 字符。 以下示例将绘制一个简单的问候消息"Hello World！" 到画布上。
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.fillText("Hello World!", 50, 100);
};
</script>您还可以设置画布上文本的颜色和对齐方式，如下所示：
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "orange";
context.fillText("Hello World!", 150, 100);
};
</script>您还可以使用 strokeText() 方法在文本上应用笔画。 此方法将为文本的周边着色而不是填充它。 但是，如果您想在画布文本上同时设置填充和描边，您可以同时使用 fillText() 和 strokeText() 方法。
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.strokeStyle = "orange";
context.strokeText("Hello World!", 150, 100);
};
</script>提示： 在画布上设置文本样式时，建议在 strokeText() 方法之前使用 fillText() 方法以进行渲染 正确的中风。