HTML5 画布

Created: October-16, 2018

画布 canvas 元素用于在网页上绘制图形。

什么是画布

HTML5 canvas 元素可用于通过脚本（通常是 JavaScript）在网页上绘制图形。该画布最初由 Apple 为 Mac OS Dashboard 控件引入，并在 Safari Web 浏览器中为图形提供动力。后来它被 Firefox，谷歌 Chrome 和 Opera 采用。现在，画布是下一代 Web 技术的新 HTML5 规范的一部分。

某些旧版浏览器不支持 <canvas> 元素，但所有主流浏览器的最新版本（如 IE 9 +，Firefox，Chrome，Safari 和 Opera）均支持该元素。默认情况下，canvas 元素的宽度为 300px，高度为 150px，没有任何边框和内容。但是，可以使用 CSS height 和 width 属性定义自定义宽度和高度，还可以使用 CSS 属性 border 来定义边框。

了解画布坐标

画布是一个二维矩形区域。画布左上角的坐标是（0,0），它被称为原点，右下角的坐标是（画布宽度，画布高度）。

在画布上绘制路径和形状

在本节中，我们将使用新引入的 HTML5 canvas 元素和 JavaScript 来了解如何绘制基本路径和形状。以下是在 2D HTML5 Canvas 上绘制路径和形状的基本模板。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script type="text/javascript">
    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 函数定义访问我们需要等待页面加载的 canvas 元素。页面加载后，我们可以通过 document.getElementById() 访问 canvas 元素。稍后我们通过将 2d 传递给 canvas 对象的 getContext() 方法来定义 2D 画布上下文。

划直线

你可以在画布上绘制的最基本路径是直线。用于此目的的方法是 moveTo() ， lineTo() 和 stroke() 。

moveTo() 方法定义了将光标绘制到画布上的位置，而 lineTo() 方法用于定义线的终点坐标，最后 stroke() 方法用于使线条可见。

<script type="text/javascript">
    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() 方法创建像笑脸一样的弧形路径。 arc() 方法的基本语法如下：

context.arc (centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

以下示例将在画布上绘制一个简单的弧。

<script type="text/javascript">
    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() 方法创建简单的矩形和正方形。该 rect() 方法需要矩形的四个参数 x，y 位置及其宽度和高度。该 rect() 方法的基本语法如下：

context.rect (x, y, width, height);

以下示例将绘制一个以画布为中心的简单矩形。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.stroke();
    };
</script>

画一个圆圈

没有特定的方法来创建像矩形 rect() 方法的圆。但是，你可以使用 arc() 方法创建一个完全封闭的圆弧，例如圆。绘制完整圆的基本语法可以通过以下方式给出：

context.arc (centerX, centerY, radius, 0, 2 * Math.PI, false);

以下示例将绘制以画布为中心的完整圆。

<script type="text/javascript">
    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>

在笔画上应用样式和颜色

笔划的默认颜色为黑色，其厚度为一个像素。但是，你可以使用 strokeStyle 和 lineWidth 属性来设置标题的颜色和宽度。

<script type="text/javascript">
    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 type="text/javascript">
    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 type="text/javascript">
    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>

提示： 建议在 fill() 方法之前使用 stroke() 方法以正确渲染笔划。

同样，使用该 fillStyle() 方法可以在圆圈内填充颜色。

<script type="text/javascript">
    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>

填充画布形状内的渐变颜色

你还可以在画布形状内填充渐变颜色而不是纯色。HTML5 中有两种渐变样式 - 线性和径向。

线性渐变的基本语法如下：

var grd = context.createLinearGradient (startX, startY, endX, endY);

以下示例将向你展示如何使用 createLinearGradient() 方法填充矩形内的线性渐变。

<script type="text/javascript">
    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() 方法使用径向渐变填充画布形状。径向渐变的基本语法如下：

var grd = context.createRadialGradient (startX, startY, startRadius, endX, endY, endRadius);

以下示例将向你展示如何使用 createRadialGradient() 方法填充圆内的径向渐变。

<script type="text/javascript">
    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 type="text/javascript">
    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 type="text/javascript">
    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 type="text/javascript">
    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>

提示： 建议在 fillText() 方法之前使用 strokeText() 方法以正确渲染笔划。