HTML5边玩边学(1):画布
来源:互联网 发布:win10软件分辨率不正常 编辑:程序博客网 时间:2024/04/28 05:44
一、<canvas>标签
Html5 引入了一个新的 <canvas> 标签,这个标签所代表的区域就好象一块画布,你的所有图形绘制最后都要在这块画布上呈现。有了这个标签,浏览器的图形表现力被极大的提升,Flash 和 SilverLight 有没有感到威胁呢?
新闻链接:Google声称Chrome7浏览器将提速60倍
<canvas>标签的用法非常简单,如下:
Code highlighting produced by ActiproCodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><canvas id="tutorial"width="150" height="150"style="background-color:red;">
你的浏览器不支持Canvas 标签
</canvas>
<canvas>标签和普通的 HTML 标签没有多大的区别,你可以设置它的宽度和高度,可以通过 CSS 设置它的背景色、边框样式等等。你可以在 这里找到关于<canvas> 标签的更多内容。
标签中间的内容是替换内容,如果用户的浏览器不支持 <canvas> 标签,这段内容就会被显示出来;如果用户的浏览器支持 <canvas> 标签,则这段内容将被忽略。
上面的<canvas> 代码显示效果如下:
你的浏览器不支持Canvas 标签
如果你用的是IE浏览器,可能只能看到一个提示;如果你用的是谷歌浏览器或者火狐浏览器,你就可以看到一个红色的方块区域。
二、渲染上下文Rendering Context
其实光有<canvas> 标签我们并不能作任何事情,玩过 Windows 编程的同学都知道,在 Windows 里面绘图先要得到一个设备上下文 DC ,在 <canvas> 标签上绘图也需要先得到一个渲染上下文,我们的图形并不是直接画到屏幕上的,而是先画到上下文(Context)上,然后再刷新到屏幕上面的。
题外话: 为什么要整出一个“上下文”这么复杂的概念呢?因为有了上下文对象,我们就可以让各种不同的图形设备在我们眼里面看起都是一个样,我们只需要专注于绘图,其他的工作就让操作系统和浏览器去操心吧,说白了就是把各式各样的具体变成统一的抽象,从而减轻我们的负担。
获取上下文非常简单,只需要如下两行代码:
Code highlighting produced by ActiproCodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->var canvas =document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
首先获取 canvas 对象,然后调用 canvas 对象的 getContext 方法,这个方法目前只能传入参数 "2d",不久的将来他可能会支持参数 "3d",你一定明白那意味着什么,让我们期待吧。
getContext 方法返回一个 CanvasRenderingContext2D 对象,即渲染上下文对象,你可以在 这里 找到关于它的更多内容,都是一些绘图方法。
三、浏览器支持
除了在那些不支持的浏览器上显示替用内容之外,我们还可以通过脚本的方式来检查浏览器是否支持 canvas ,方法很简单,判断 getContext 函数是否存在即可,代码如下:
Code highlighting produced by ActiproCodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->var canvas =document.getElementById('tutorial');
if (canvas.getContext){
alert("支持 <canvas> 标签");
} else {
alert("不支持 <canvas> 标签");
}
- HTML5边玩边学(1):画布
- HTML5边玩边学(1):画布
- HTML5:学习(1)视频,拖放,画布
- HTML5(1):画布(canvas)
- 【初识HTML5】(1) : 什么是画布
- HTML5 canvas画布(一)
- HTML5 canvas画布(二)
- HTML5 canvas画布(三)
- HTML5 canvas画布(四)
- HTML5 canvas画布(五)
- HTML5 canvas画布(六)
- html5学习之路(Canvas画布1)
- html5画布写的一个键盘游戏(1)
- html5画布
- HTML5画布
- HTML5 画布
- html5画布
- HTML5画布
- django中的分页
- 博客互推联盟上线了
- 深度学习(三十)贪婪深度字典学习
- Shell 操作(三)——举例
- 利用重写onTouchEvent方法实现view随手指移动效果
- HTML5边玩边学(1):画布
- java笔记--关于线程同步(5种同步方式)
- 关于闭包的理解
- Android面试题
- 系统参数的最小二乘法估计
- 多线程 : 多线程共享局部变量的方法
- 检查iOS项目中是否使用了IDFA
- 自定义View实例——下雨天画面
- 单目相机标定