简述html5如何编写画布程序,HTML5 画布

HTML5 元素为我们使用 JavaScript 绘制图形提供了一种简单而又强大的方式。它可以用来绘制图表，制作摄影作品或者做一些简单(以及复杂)的动画。

这里有一个简单的 元素，除了所有核心的 HTML5 属性，比如 id，name 和 class 等等之外，它只有两个特定的属性 width 和 height。

使用 _getElementById()__ 方法很容易找到这个 元素，如下所示：

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

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

#mycanvas{

border:1px solid red;

}

便于学习上述概念 - 请使用最新版的 Safari 或者 Opera 进行在线练习。

渲染上下文

初始为空，要显示某物，脚本首先需要访问渲染上下文，然后再上面绘图。

canvas 元素有一个叫做 getContext 的 DOM 方法，用于获得渲染上下文和它的绘图功能。这个函数接受一个参数，2d 上下文类型。

下面的代码就是访问需要的上下文以及检测浏览器是否支持 元素：

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 让 IE 浏览器支持 Canvas。只需按照如下方式引入这个脚本即可：

HTML5 Canvas 示例

本教程涵盖下列 HTML5 元素相关的示例。

示例

描述

学习如何使用 HTML5 元素绘制矩形。

学习如何在 HTML5 元素中使用路径创建形状。

学习如何使用 HTML5 元素绘制线条。

学习如何使用 HTML5 元素绘制贝塞尔曲线。、

学习如何使用 HTML5 元素绘制二次曲线。

学习如何在 HTML5 元素中使用图像。

学习如何使用 HTML5 元素创建渐变。

学习如何使用 HTML5 元素应用样式和颜色。

学习如何使用不同的字体和尺寸绘制神奇的文字。

学习如何绘制不同的图案和阴影。

学习如何在画布上做复杂绘图时保存和恢复画布状态。

这个方法用于移动画布和它原点到网格上的不同点。

这个方法用于围绕当前原点旋转画布。

这个方法用于增大或者减小画布网格中的单位。

这个方法允许我们直接修改变换矩阵。

这个方法用于从画布上屏蔽某些区域或者清除某一部分。

学习如何使用 HTML5 画布和 JavaScript 创建基本的动画。