您现在的位置是：网站首页> 编程资料编程资料

HTML5边玩边学（1）画布实现方法 HTML5 画布canvas使用方法使用分层画布来优化HTML5渲染的教程html5画布旋转效果示例用html5的canvas画布绘制贝塞尔曲线完整代码html5的画布canvas——画出简单的矩形、三角形实例代码html5的画布canvas——画出弧线、旋转的图形实例代码+效果图Html5画布_动力节点Java学院整理

2023-10-15 323人已围观

简介 Html5 引入了一个新的 <canvas> 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢? </canvas>

一、标签

Html5 引入了一个新的 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢?

新闻链接：Google声称Chrome7浏览器将提速60倍

标签的用法非常简单，如下：

复制代码
代码如下:


你的浏览器不支持 Canvas 标签



标签和普通的 HTML 标签没有多大的区别，你可以设置它的宽度和高度，可以通过 CSS 设置它的背景色、边框样式等等。

你可以在 这里 找到关于 标签的更多内容。

标签中间的内容是替换内容，如果用户的浏览器不支持 标签，这段内容就会被显示出来；如果用户的浏览器支持 标签，则这段内容将被忽略。

上面的 代码显示效果如下：

你的浏览器不支持 Canvas 标签

如果你用的是IE浏览器，可能只能看到一个提示；如果你用的是谷歌浏览器或者火狐浏览器，你就可以看到一个红色的方块区域。
二、渲染上下文 Rendering Context
其实光有 标签我们并不能作任何事情，玩过 Windows 编程的同学都知道，在 Windows 里面绘图先要得到一个设备上下文 DC ,在 标签上绘图也需要先得到一个渲染上下文，我们的图形并不是直接画到屏幕上的，而是先画到上下文(Context)上，然后再刷新到屏幕上面的。
题外话： 为什么要整出一个“上下文”这么复杂的概念呢？因为有了上下文对象，我们就可以让各种不同的图形设备在我们眼里面看起都是一个样，我们只需要专注于绘图，其他的工作就让操作系统和浏览器去操心吧，说白了就是把各式各样的具体变成统一的抽象，从而减轻我们的负担。
获取上下文非常简单，只需要如下两行代码：
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
首先获取 canvas 对象，然后调用 canvas 对象的 getContext 方法，这个方法目前只能传入参数 "2d"，不久的将来他可能会支持参数 "3d"，你一定明白那意味着什么，让我们期待吧。
getContext 方法返回一个 CanvasRenderingContext2D 对象 ，即渲染上下文对象，你可以在 这里 找到关于它的更多内容，都是一些绘图方法。

三、浏览器支持
除了在那些不支持的浏览器上显示替用内容之外，我们还可以通过脚本的方式来检查浏览器是否支持 canvas ，方法很简单，判断 getContext 函数是否存在即可，代码如下：

复制代码
代码如下:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("支持 标签");
} else {
alert("不支持 标签");
}


四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出

提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

上一篇：html5 学习简单的拾色器 html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

下一篇：全民英雄挑战副本掉落大全 全民英雄挑战副本掉落哪些装备_手机游戏_游戏攻略_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网