ZetCode

简介

最后修改于 2023 年 7 月 17 日

HTML5 Canvas 教程的这部分是 JavaScript 语言中 HTML5 Canvas 编程的入门介绍。

关于

这是 HTML5 Canvas 教程。它面向初学者。本教程将教您 HTML5 Canvas 元素在 JavaScript 中进行图形编程的基础知识。本教程中使用的图片可以 此处 下载。

HTML5 Canvas 元素 提供了用于处理矢量和栅格图形的工具。

HTML5 canvas

HTML5 Canvas 元素提供了一个依赖于分辨率的位图区域，可用于即时渲染图表、游戏图形、艺术品或其他视觉图像。简单来说，Canvas 是 HTML5 中的一个新元素，它允许您使用 JavaScript 绘制图形。Canvas 为网页带来了动画，无需 Flash、Silverlight 或 Java 等插件。

HTML5 Canvas 最初由 Apple 于 2004 年推出，用于 Mac OS X WebKit，为 Dashboard 应用程序及其 Safari 网页浏览器提供支持。自那时以来，它已被 Mozilla 和 Opera 采用。后来，W3C 在 HTML5 规范中采用了它。如今，所有现代网页浏览器都支持它。

Canvas 上下文

Canvas 上下文是一个对象，它公开 Canvas API 来执行绘图。它提供对象、方法和属性，用于在 Canvas 绘图表面上绘制和操作图形。上下文通过 getContext 方法检索。该方法的参数指定所需的 API："2d" 用于二维图形，或 "webgl" 用于二维和三维图形。如果不支持给定的上下文 ID，它将返回 null。

绘制矩形

我们创建一个 HTML5 Canvas 中图形渲染的简单示例。

rectangle.html 
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas rectangle</title>    
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
    
        ctx.fillStyle = "cadetblue";
        ctx.fillRect(0, 0, 100, 100);
    }    
</script>
</head>
    
<body onload="draw();">
    <canvas id="myCanvas" width="250" height="150">
    </canvas>
</body>
</html>

代码示例在网页的左上角绘制了一个 cadetblue 矩形。

<!DOCTYPE html>

文档类型声明，或 DOCTYPE，是向网页浏览器指示 HTML 文档性质的指令。此特定声明告诉浏览器该网页是一个 HTML5 文档。Canvas 元素最早在 HTML5 标准中引入。

<script>
    function draw() {
...
    }    
</script>

绘图是在自定义 draw 函数中执行的。在 HTML 文档的 body 加载时调用它。

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

使用 getElementById 方法，我们获取对 Canvas 元素的引用。

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

使用 getContext 方法检索渲染上下文。

ctx.fillStyle = "cadetblue";

上下文的 fillStyle 属性指定用于形状内部的颜色或样式。然后，该样式用于后续的绘图操作。

ctx.fillRect(0, 0, 100, 100);

我们以指定的颜色绘制一个矩形。矩形的尺寸在方法的参数中给出。前两个参数是 x 和 y 坐标。接下来的两个参数是矩形的宽度和高度。

<body onload="draw();">

onload 属性定义了窗口加载事件的事件处理程序。加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在 DOM 中，所有图像、脚本、链接和子框架都已加载完成。在我们的例子中，我们调用 draw 方法，该方法在 Canvas 上执行绘图。

<canvas id="myCanvas" width="250" height="150">
</canvas>

Canvas 元素使用 <canvas> 和 </canvas> 标签创建。width 和 height 属性设置页面内 Canvas 元素的大小。id 属性在 DOM 层次结构中标识该元素。

HTML5 canvas rectangle
图：HTML5 Canvas 矩形

阴影

HTML5 Canvas 包含创建阴影的属性。

shadow.html 
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas shadow</title>    
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowBlur    = 4;
        ctx.shadowColor   = "#888";  
        
        ctx.fillStyle = "#000000";
        ctx.fillRect(10, 10, 80, 80);
    }    
</script>
</head>
    
<body onload="draw();">
    <canvas id="myCanvas" width="250" height="150">
    </canvas>
</body>
</html>

在示例中，我们在矩形下方创建了一个阴影。

ctx.shadowOffsetX = 5;

shadowOffsetX 属性指定阴影在水平方向上偏移的距离。

ctx.shadowOffsetY = 5;

shadowOffsetY 属性指定阴影在垂直方向上偏移的距离。

ctx.shadowBlur    = 4;

shadowBlur 属性指定模糊效果的级别。

ctx.shadowColor   = "#888";

shadowColor 属性指定阴影的颜色。

HTML5 canvas shadow
图：HTML5 Canvas 阴影

引用

创建本教程使用的以下资源

HTML5 Canvas 教程的这部分是 HTML5 Canvas 的 JavaScript 编程入门介绍。