java边学边玩_HTML5边玩边学(1):画布
一、标签
Html5 引入了一个新的 标签,这个标签所代表的区域就好象一块画布,你的所有图形绘制最后都要在这块画布上呈现。有了这个标签,浏览器的图形表现力被极大的提升,Flash 和 SilverLight 有没有感到威胁呢?
标签的用法非常简单,如下:
你的浏览器不支持 Canvas 标签
标签和普通的 HTML 标签没有多大的区别,你可以设置它的宽度和高度,可以通过 CSS 设置它的背景色、边框样式等等。你可以在 这里 找到关于 标签的更多内容。
标签中间的内容是替换内容,如果用户的浏览器不支持 标签,这段内容就会被显示出来;如果用户的浏览器支持 标签,则这段内容将被忽略。
上面的 代码显示效果如下:
你的浏览器不支持 Canvas 标签
如果你用的是IE浏览器,可能只能看到一个提示;如果你用的是谷歌浏览器或者火狐浏览器,你就可以看到一个红色的方块区域。
二、渲染上下文 Rendering Context
其实光有 标签我们并不能作任何事情,玩过 Windows 编程的同学都知道,在 Windows 里面绘图先要得到一个设备上下文 DC ,在 标签上绘图也需要先得到一个渲染上下文,我们的图形并不是直接画到屏幕上的,而是先画到上下文(Context)上,然后再刷新到屏幕上面的。
题外话: 为什么要整出一个“上下文”这么复杂的概念呢?因为有了上下文对象,我们就可以让各种不同的图形设备在我们眼里面看起都是一个样,我们只需要专注于绘图,其他的工作就让操作系统和浏览器去操心吧,说白了就是把各式各样的具体变成统一的抽象,从而减轻我们的负担。
获取上下文非常简单,只需要如下两行代码:
varcanvas=document.getElementById('tutorial');varctx=canvas.getContext('2d');
首先获取 canvas 对象,然后调用 canvas 对象的 getContext 方法,这个方法目前只能传入参数 "2d",不久的将来他可能会支持参数 "3d",你一定明白那意味着什么,让我们期待吧。
getContext 方法返回一个 CanvasRenderingContext2D 对象 ,即渲染上下文对象,你可以在 这里 找到关于它的更多内容,都是一些绘图方法。
三、浏览器支持
除了在那些不支持的浏览器上显示替用内容之外,我们还可以通过脚本的方式来检查浏览器是否支持 canvas ,方法很简单,判断 getContext 函数是否存在即可,代码如下:
varcanvas=document.getElementById('tutorial');if(canvas.getContext){
alert("支持 标签");
}else{
alert("不支持 标签");
}
四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子, 具体的代码将在后续内容中给出
你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
版权声明:本文为原创文章,作者保留所有权利!欢迎转载,转载请注明作者左洸和出处
//==========================================
posted on 2010-09-17 23:45 左洸 阅读(2807) 评论(2) 编辑 收藏 所属分类: HTML5
java边学边玩_HTML5边玩边学(1):画布相关推荐
- 网沙(爱玩啥)韩顺平.循序渐进学.java.从入门到精通系列视频分享
网沙(爱玩啥)韩顺平.循序渐进学.java.从入门到精通系列视频分享 韩顺平.循序渐进学.java.从入门到精通.第0讲-开山篇 韩顺平.循序渐进学.java.从入门到精通.第1讲-内容介绍.项 ...
- java演练 数组的逆序文字玩法 你是猪才怪
java演练 数组的逆序文字玩法 你是猪才怪 视频 https://www.ixigua.com/6870379403545674247?logTag=fgsSVbgK-TlKqZyHDyjmo 代码 ...
- 我的世界java怎么玩起床战争_我的世界经验起床战争怎么玩 起床战争玩法攻略...
在我的世界游戏中有一种玩法叫做起床战争,然而在起床战争中游戏模式有很多种,所以大家想了解我的世界经验起床战争怎么玩?起床战争玩法技巧攻略!一起来看看吧! 我的世界经验起床战争怎么玩 首先小编先来给大家 ...
- 看完一个在校大学生的 Java 学习历程,我觉得我还能学得更多
不知道出处,是在qq空间看到的,觉得很有道理,原文作者看到了请评论附上原文链接,我来添加上 写在前面: 其实学习是一件很私人的事情,每个人都应该有一套自己的学习方式,而不是照搬照抄别人的.适合别人的不 ...
- 看完一个在校大学生的Java学习历程,我觉得我还能学得更多
GitChat 作者:MyStery 原文:程序员如何高效学习(以 Java 为例) 关注微信公众号:「GitChat 技术杂谈」 一本正经的讲技术 写在前面:其实学习是一件很私人的事情,每个人都应该 ...
- 用计算机玩纸牌,《玩“纸牌”游戏》教学设计
[教学目标] 知识目标:1.进一步认识窗口.对话框和菜单命令. 2.让学生掌握纸牌游戏的玩法,使学生从玩中学计算机知识. 3.使学生熟练掌握鼠标器的操作方法. 4.初步使用"帮助" ...
- 【正一专栏】中国足球不是你想不玩就不玩的
中国足球不是你想不玩就不玩的 保定容大退赛现在成了一场闹剧,随着容大俱乐部董事长孟永立辞职,这位又哭又闹喊着不玩的董事长就这样从前台消失,容大俱乐部也随即发表申明,愿意接受足协的一切处罚,丝毫不提退赛 ...
- 蓝宝石 470 原版 bios_想怎么玩就怎么玩!改造双BIOS显卡,不再为噪音和性能选择而烦恼...
前几天文章讲述了,对于用户体验方面, 蓝宝石和迪兰恒进的选择. 但其实,他们也经常会推出双BIOS的版本, 只是他们的双BIOS,并非在性能和噪音之间做出选择. 而是一个BIOS是基础版,性能正常. ...
- java考试安徽工业大学_2011~2012《Java语言程序设计》试卷A及答案(安徽工业大学)...
<2011~2012<Java语言程序设计>试卷A及答案(安徽工业大学)>由会员分享,可在线阅读,更多相关<2011~2012<Java语言程序设计>试卷A及 ...
最新文章
- Python培训完可以找什么工作
- php函数介绍,PHP函数介绍_PHP教程
- linux 生成字母序列,Python序列之字符串
- 教你如何不显示excel中#N/A
- Spring-学习笔记08【面向切面编程AOP】
- Leecode 1218. 最长定差子序列——Leecode每日一题系列
- neo4j 嵌入式_在嵌入式Neo4j中使用Neo4j浏览器
- centos7在线yum安装mysql时官方镜像下载过慢的解决方案
- 【紫书第九章】动态规划(DP)常见模型汇总与DP问题分析方法
- gstreamer/deepstream崩溃记录及分析
- SecureCRT无法使用Zmodem上传下载文件
- 新加坡全面开放边境,畅游畅游《摘金奇缘》新加坡地标性景点
- 2小时完成的第一个副业单子:Python修正excel表格数据
- Tox协议官方文档翻译(一)
- 自媒体新手怎么赚钱,搬运不是长久的出路!
- android 百度查询当前所在省市區,百度地图定位,并获取当前省市区Id
- 海盗云商php,海盗云商(2.2.1.160429)前台无限制注入(无需登录,无视GPC)
- log4j:ERROR Either File or DatePattern options are not set for appender [E].
- RocketMQ原理刨析
- 全民所有制事业单位辞退专业技术人员和管理人员暂行规定
热门文章
- 开源无国界?vue-cli、node-ipc被投毒事件分析
- 在做微信分享发送红包时思路
- 跨域请求解决方案及详解
- Linux C++ libdl.so dlfcn.h使用方法(dlopen()、dlsym()、dlclose()、dlerror())(用于动态链接库操作)(懒加载、立即加载)共享库符号、动态库
- 真假蜘蛛识别php,【PHP】检测搜索蜘蛛真假IP支持:谷歌、百度、搜狗、必应、yandex、360搜索;...
- 在Linux中实现文本文件的复制_莫韵乐的小脚印笔记
- Plaxis软件:Python命令流自动建模与应用
- 代码随想录训练营day57
- HTML前端输入一个值判断奇数还是偶数
- 计算机一级2010教材,计算机一级2010年春第二套教材.doc