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]-->
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创建基本动画。 |
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕