关注我们

HTML5 - Canvas画布

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 
}

浏览器支持

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

您可以使用 ExplorerCanvas 通过Internet Explorer获得画布支持。您只需要按如下方式包含此JavaScript-

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

Canvas 示例

Sr.No.	Examples & Remark
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 canvas和JavaScript创建基本动画。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Java业务开发常见错误100例 -〔朱晔〕

TensorFlow 2项目进阶实战 -〔彭靖田〕

程序员的个人财富课 -〔王喆〕

好记忆不如烂笔头。留下您的足迹吧 :)