HTML5边玩边学(1)画布实现方法
一、<canvas>标签
Html5 引入了一个新的 <canvas> 标签,这个标签所代表的区域就好象一块画布,你的所有图形绘制最后都要在这块画布上呈现。有了这个标签,浏览器的图形表现力被极大的提升,Flash 和 SilverLight 有没有感到威胁呢?
新闻链接:Google声称Chrome7浏览器将提速60倍
<canvas>标签的用法非常简单,如下
- <canvas id="tutorial" width="150" height="150" style="">
- 你的浏览器不支持 Canvas 标签
- </canvas>
复制代码
<canvas>标签和普通的 HTML 标签没有多大的区别,你可以设置它的宽度和高度,可以通过 CSS 设置它的背景色、边框样式等等。
你可以在 w3cschool 找到关于 <canvas> 标签的更多内容。
标签中间的内容是替换内容,如果用户的浏览器不支持 <canvas> 标签,这段内容就会被显示出来;如果用户的浏览器支持 <canvas> 标签,则这段内容将被忽略。
上面的 <canvas> 代码显示效果如下:
你的浏览器不支持 Canvas 标签
如果你用的是IE浏览器,可能只能看到一个提示;如果你用的是谷歌浏览器或者火狐浏览器,你就可以看到一个红色的方块区域。
二、渲染上下文 Rendering Context
其实光有 <canvas> 标签我们并不能作任何事情,玩过 Windows 编程的同学都知道,在 Windows 里面绘图先要得到一个
设备上下文 DC ,在 <canvas> 标签上绘图也需要先得到一个渲染上下文,我们的图形并不是直接画到屏幕上的,而是先画到
上下文(Context)上,然后再刷新到屏幕上面的。
题外话: 为什么要整出一个“上下文”这么复杂的概念呢?因为有了上下文对象,我们就可以让各种不同的图形设备在我们眼里
面看起都是一个样,我们只需要专注于绘图,其他的工作就让操作系统和浏览器去操心吧,说白了就是把各式各样的具体变成
统一的抽象,从而减轻我们的负担。
获取上下文非常简单,只需要如下两行代码:
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
首先获取 canvas 对象,然后调用 canvas 对象的 getContext 方法,这个方法目前只能传入参数 "2d",不久的将来他可能会支持参数 "3d",你一定明白那意味着什么,让我们期待吧。
getContext 方法返回一个 CanvasRenderingContext2D 对象 ,即渲染上下文对象,你也可以在w3cschool找到关于它的更多内容,都是一些绘图方法。
三、浏览器支持
除了在那些不支持的浏览器上显示替用内容之外,我们还可以通过脚本的方式来检查浏览器是否支持 canvas ,方法很简单,判断 getContext 函数是否存在即可,代码如下:
- var canvas = document.getElementById('tutorial');
- if (canvas.getContext){
- alert("支持 <canvas> 标签");
- } else {
- alert("不支持 <canvas> 标签");
- }
复制代码
四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子, 具体的代码将在后续内容中给出
- <canvas style="你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
- <script type="text/javascript">
- var canvas = document.getElementById('move_line');
- var ctx=canvas.getContext("2d");
- //上下移动的直线
- var width=400;
- var height=200;
- var y=0
- var dir=1;
- ctx.strokeStyle = "rgb(255,0,0)";
- function draw(){
- ctx.clearRect(0,0,width,height)
- ctx.beginPath();
- ctx.moveTo(0,y);
- ctx.lineTo(width-1,y);
- ctx.stroke();
- y=y+dir;
- if((y==0)||(y==(height-1))) dir=dir*(-1);
- }
- </script><p><input onclick="interval=setInterval(draw,10);" value="开始" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button">
HTML5边玩边学(1)画布实现方法的更多相关文章
- html5开发学习 html5自学需要怎么学
记得很多大鳄都说过一句话:只要站在风口上,猪都能飞起来.而对于如今的IT技术领域来说,无疑这只幸运的"猪"非html5莫属.html5开发技术在16年迎来了一个飞跃的发展,这也让很 ...
- 哪个HTML5内建对象用于在画布上绘制?()
哪个HTML5内建对象用于在画布上绘制?() getContent getContext getGraphics getCanvas 我的理解: A.C.D不存在HTML5,,js方法中 HTML 5 ...
- HTML5移动开发即学即用(双色) 王志刚 pdf扫描版
HTML5已经广泛应用于各智能移动终端设备上,而且绝大部分技术已经被各种最新版本的测览器所支持:逐一剖析HTML5标准中包含的最新技术,详细介绍了HTML5新标准中提供的各种API,各种各样的应用实例 ...
- 你真的会玩SQL吗?实用函数方法汇总
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- html5手机端播放音效不卡的方法
html5手机端播放音效不卡的方法线下载http://wxserver.knowway.cn/solosea/js/audioEngine.js 这个是性能不错 然后直接播放音效就可以了 audioE ...
- HTML5画布实现方法:
我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...
- 自学HTML5第四节(canvas画布详解)
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...
- HTML5(二)音频视频画布
HTML5 Audio(音频) 定义和用法 <audio src="someaudio.wav" controls="controls"> 您的浏览 ...
- HTML5 Canvas玩转酷炫大波浪进度图
如上图所见,本文就是要实现上面那种效果. 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果.所以首选大波浪进度图. 首先要封装一下大波浪图片进度组件.基本的原理是利用Canvas绘 ...
随机推荐
- spring 定时器设置每隔10秒触发
<property name="cronExpression" value="0/10 * * * * ?" />
- An AnnotationConfiguration instance is required to use
An AnnotationConfiguration instance is required to use <mapping class="jebe7282/study/hibern ...
- 如何使页面滚动条移动到指定元素element的位置处?
如何使页面滚动条移动到指定元素element的位置处? 在用selenium做测试时,会遇到需要操作的元素不在当前可视页面中的情况,如果是手工测试,自然很简单,手动拖拽滚动条到目标元素处即可. 那么, ...
- git和其他版本控制系统的区别
所有除了Git以外的版本控制系统都使用增量存储方式来保存不同版本,而Git则在每一个commit时,保存一个整个文件的content copy,除非那个文件没有做过改动.Git和其他版本系统的主要区别 ...
- Machine Learning for hackers读书笔记(二)数据分析
#均值:总和/长度 mean() #中位数:将数列排序,若个数为奇数,取排好序数列中间的值.若个数为偶数,取排好序数列中间两个数的平均值 median() #R语言中没有众数函数 #分位数 quant ...
- 通过运行时动态给OC分类添加属性
#import <UIKit/UIKit.h> /** iOS 开发中,分类默认不允许保存属性 如果在分类中,定义一个属性,需要自己实现 getter & setter 方法,而且 ...
- [转载]initwithcoder和 initwithframe
大前提是UIViewController有一个UIView.同时,需要厘清两个概念,创建一个类和实例化一个类.在XCode中创建一个类和实例化一个类很容易区分,但是在IB(Interface Buil ...
- 想找个计算器当本命?来试试UWP应用《纸书科学计算器》
久违了.上次在博客园发文还是4年前,正是高中参加NOIP的时候.这4年里发生了很多事,乃至再次看到过去的文章时,仿佛看到了自己也不熟悉的风景.最近很想把我的博客重新拾起来,慢慢灌溉,写一些微不足道的技 ...
- 菜鸟学习笔记4——jquery事件
方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 cli ...
- cocos2d-x使用python脚本创建项目的简单方法
本文有CC原创,转载请注明地址:http://blog.csdn.net/oktears/article/details/13297003 在cocos2d-x2.1.4以上的版本中,取消了使用vs模 ...