Canvas 画布

优质

小牛编辑

129浏览

2023-12-01

HTML5元素canvas为您提供了一种使用JavaScript绘制图形的简单而强大的方法。它可以用于绘制图形，制作照片合成或做简单（而不是那么简单）的动画。

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

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

您可以使用getElementById()方法在DOM中轻松找到<canvas>元素，如下所示 -

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>

渲染上下文

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 
}

浏览器支持 (Browser Support)

最新版本的Firefox，Safari，Chrome和Opera都支持HTML5 Canvas，但IE8本身不支持canvas。

您可以使用ExplorerCanvas通过Internet Explorer获得画布支持。你只需要包含这个JavaScript如下 -

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

HTML5画布示例

本教程介绍了与HTML5 canvas元素相关的以下示例。

Sr.No.	示例和说明
1	Drawing Rectangles 了解如何使用HTML5 canvas元素绘制矩形
2	Drawing Paths 了解如何使用HTML5 canvas元素中的路径创建形状
3	Drawing Lines 了解如何使用HTML5 canvas元素绘制线条
4	Drawing Bezier 了解如何使用HTML5 canvas元素绘制Bezier曲线
5	Drawing Quadratic 了解如何使用HTML5 canvas元素绘制二次曲线
6	Using Images 了解如何使用HTML5 canvas元素使用图像
7	Create Gradients 了解如何使用HTML5 canvas元素创建渐变
8	Styles and Colors 了解如何使用HTML5 canvas元素应用样式和颜色
9	Text and Fonts 了解如何使用不同的字体及其大小绘制出色的文本。
10	Pattern and Shadow 了解如何绘制不同的图案和阴影。
11	Canvas States 了解如何在画布上执行复杂绘图时保存和恢复画布状态。
12	Canvas Translation 此方法用于将画布及其原点移动到网格中的不同点。
13	Canvas Rotation 此方法用于围绕当前原点旋转画布。
14	Canvas Scaling 此方法用于增加或减少画布网格中的单位。
15	Canvas Transform 这些方法允许直接修改转换矩阵。
16	Canvas Composition 此方法用于屏蔽某些区域或从画布中清除部分。
17	Canvas Animation 了解如何使用HTML5画布和JavaScript创建基本动画。