HTML5 – 画布(Canvas)

HTML5的<canvas>元素为您提供了一种使用JavaScript绘制图形的简单而强大的方法。它可用于绘制图表、制作图片合成或进行简单(以及不那么简单的)动画。

这是一个简单的<canvas>元素，它只有两个特定的属性 width 和 height ，以及所有核心HTML5属性，如id、name和class等。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

您可以使用 getElementById() 方法轻松在DOM中查找

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

让我们看一个在HTML5文档中使用<canvas>元素的简单示例。

<!DOCTYPE HTML>

<html>
   <head>

      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>

   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

这将产生以下结果 −

HTML5 - 画布(Canvas)

渲染上下文

画布(<canvas>)最初为空白的，为了显示内容，脚本首先需要访问渲染上下文并在其上绘制。

画布元素有一个称为 getContext 的DOM方法，用于获取渲染上下文及其绘图函数。该函数需要一个参数，上下文类型 2d 。

以下是获取所需上下文以及检查您的浏览器是否支持<canvas>元素的代码−

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

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   

   // canvas-unsupported code here 
}

浏览器支持

Firefox、Safari、Chrome和Opera的最新版本都支持HTML5画布，但IE8不支持本地画布。

您可以使用 ExplorerCanvas 通过Internet Explorer获得画布支持。您只需要像下面这样包含这个JavaScript即可 −

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

HTML5画布示例

本教程涵盖与HTML5的<canvas>元素相关的以下示例。

序号	例子和描述
1	绘制矩形学习如何使用HTML5`<canvas>`元素绘制矩形
2	绘制路径学习如何在HTML5`<canvas>`元素中使用路径制作形状
3	绘制线条学习如何使用HTML5`<canvas>`元素绘制线条
4	绘制贝塞尔曲线学习如何使用HTML5`<canvas>`元素绘制贝塞尔曲线
5	绘制二次曲线学习如何使用HTML5`<canvas>`元素绘制二次曲线
6	使用图片学习如何在HTML5`<canvas>`元素中使用图片
7	创建渐变学习如何使用HTML5`<canvas>`元素创建渐变
8	样式和颜色学习如何使用HTML5`<canvas>`元素应用样式和颜色
9	文本和字体学习如何使用不同的字体和其大小绘制惊人的文本
10	图案和阴影学习如何绘制不同的图案和阴影
11	画布状态学习如何在画布上进行复杂绘制时保存和恢复画布状态
12	画布平移这种方法用于将画布及其原点移动到网格中的不同点。
13	画布旋转该方法用于围绕当前原点旋转画布。
14	画布缩放该方法用于增加或减少画布网格中的单位。
16	画布组合该方法用于遮罩某些区域或清除画布中的某些区域。
17	画布动画学习如何使用HTML5画布和JavaScript创建基本动画。