开发者值得关注的HTML5新特性:Canvas
随着IE 10的即将发布正式版,标志者HTML5的时代已经越来离我们越来越近了,尽管HTML 5的最终标准草案还没最终敲定,但象Chrome,Firefox等浏览器对HTML5的标准已经支持的十分完善了,IE 10的预览版本也声称支持更多的HTML 5特性。
在此情况下,无论作为CTO还是一般的前端页面开发者还是网站编程的开发人员,都应该开始给予HTML5相当的重视。而在HTML5中,其中最 令 开发者和用户值得留意的新特性,莫过于Canvas的功能了,它能在目前的IE 9,IE 10以及Chrome,FireFox等多种浏览器中使用,是目前HTML5中富客户端动画效果的实现方式,有了它,HTML5就有了跟Adobe Flash对抗的资本,用户以后只要使用支持HTML5的浏览器,就可以不用安装Flash插件了。那么,究竟什么是HTML 5中的Canvas功能呢?本文将带领初学者学习Canvas的入门知识。
走近Canvas 元素标签
官方对Canvas元素标签的定义为:Canvas(画布)可以用来进行绘制图形,绘制游戏的图案或者其他图形图案,允许使用脚本动态渲染点阵 图像。简 单来说,Canvas就是允许你在HTML5中,使用Javascript去绘制你喜欢的任何图形了,包括文字,图片、线、点、各种形状等。Canvas 使用的是Canvas 2D API去绘制图形的,这个API功能十分强大,而且大部分的浏览器都支持 2D canvas ——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ,firefox 也可以通过插件形式支持 3D canvas 。下面马上来看Canvas的例子。
这个代码就会在浏览器中先绘画一张画布,宽度和高度都是300px,但这个时候页面上并不能显示什么效果,只是一个空的区域。
在一个页面中,可以有不同的canvas,不同的canvas都必须有自己的id属性以示区分。为了在canvas上绘制图形,必须引用 canvas的 上下文context变量。Context上下文能让你访问2D API中的属性和方法,这样就可以在画布元素中操作和绘画图形了,这个我们稍后再详细讲解。
先来看下每一canvas元素标签中都有X和Y坐标,X坐标代表水平,Y坐标代表垂直,下图是其坐标系的图:
Canvas和SVG的关系
开发者必须清楚SVG技术和canvas是不同的。SVG是基于XML的图形矢量显示技术,可以将其与CSS混搭使用,也可以使用SVG DOM动态向其添加行为。而canvas则允许使用Javascript去绘制各种图象和图形,下面是一些canvas胜过svg的优点:
1) canvas在绘制复杂图象时,绘画速度比SVG快不少。
2) 可以保存canvas绘制的图象,但SVG不能直接使用浏览器的保存功能保存。
3) 在canvas中所有东西都以象素形式存在。
4) svg需要在浏览器中使用插件显示。
但要同时注意到,svg也有自身的优势,比如:
1) svg的图形解析分辨率能适应不同大小尺寸。
2) svg由于使用XML,因此能定义很多不同的目标元素。
3) svg能绘制很复杂的动画效果。
那如何选择呢?建议如果你的网站的图象对分辨率要求高(矢量图要求),那么选择SVG,如果你的应用是网页游戏等对速度要求响应高的,也不想过 多跟 XML打交道的话,则选用canvas。更多关于如何选择SVG和Canvas,可以参考这篇文章的论述:http://blogs.msdn.com /b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx
Canvas和硬件加速
在学习canvas时,建议读者阅读这篇文章《硬件加速下的图形显示对比》, 这篇文章中对比了HTML5下canvas在各浏览器下的渲染表现。在早期的浏览器中,所有对图形的显示运算都是有CPU去实现的,而随着互联网的快速发 展,对图形处理的要求越来越高,于是很多的图形渲染工作都由图形处理单元(GPU)去处理了,比如使用Direct2D或者DirectWrite。当图 形处理工作大部分交由GPU去处理时,大大减轻了CPU的工作负担,可以腾出来做其他更复杂的工作。
Javascript一直被指责在 处理图形方面逊色,但随着FireFox,Chrome等浏览器的大行其道,还有IE 9的新的Javascript引擎Chara,它采用在后台与IE并行并且独立的CPU内核中编译 JavaScript 脚本,采用单独的后台线程进行编译。采用这种方法,可以充分利用现在的多核处理器功能。开发人员可以不用更改任何现有的代码即可利用现有计算机硬件的带来 的性能提升。
因此,有了浏览器在GPU方面的加速功能,就能为HTML5的canvas的使用提供很好的环境。
当向 canvas发出绘画命令时,浏览器直接将指令发到图形加速器而不需要开发者更多的干预,硬件图形加速器则以难以置信的运算速度实时绘画和渲染图形。可以 通过阅读下文来了解更多的在不同浏览器之间的硬件加速测试的具体情况(地址:http://ie.microsoft.com/testdrive /Performance/Paintball/Default.html)
Canvas 2D API
canvas 2D API对象允许开发者绘制各种图片和图形。调用时,需要通过getContext方法获得其上下文,这个方法中有一个参数,目前是2d,调用的代码如下:
var context = myCanvas.getContext(“2d”);
由于每一个canvas元素都有自己的上下文context,因此如果一个页面中有多个canvas的话,必须对每一个canvas都按上面的方法获得其context。除此之外,canvas api有如下的若干重要方法:
形状变换类的方法
• scale –允许对当前canvas对象进行形状大小变换
• rotate –允许对当前的canvas对象绕 x轴和y轴旋转。
状态变换类方法
• save – 保存当前canvas的状态
• restore –恢复上一个已保存的canvas的状态
文字类方法
• font –设置或获得当前canvas的字体
• fillText –向当前canvas填充文字
• measureText –获得指定文字的宽度
更多的关于canvas 2D API的用法,可以参考这个页面http://msdn.microsoft.com/en-us/library/ff975057.aspx)。下面,我们开始学习如何使用这些API去绘制图形。
绘制形状和颜色
首先,学习下如何画矩形,下面是相关的方法:
1) fillRect(x, y, w, h),使用当前样式去绘制一个矩形并对其进行填充,其中x,y,w,h分别是X,Y坐标和宽度高度坐标。
2)strokeRect(x, y, w, h),使用当前的轮廓样式去勾画一个矩形,注意这里是用线条去勾画,而不是去填充一个矩形。
3)clearRect(x, y, w, h),在当前的画布中清除矩形的内容。
画矩形最简单的方法是用fillRect方法了,如下代码:
var context = canvas.getContext(“2d”);
context.fillRect(5, 5, 145, 145);
则在X=5,Y=5的坐标系中画出一个145*145的矩形,如下图:
如果不指定颜色,默认的是使用黑色去填充整个矩形。可以使用fillStyle方法为矩形指定颜色或其他样式,比如可以充分利用CSS 3中的opacity透明度属性,比如如下的代码,分别画了三个矩形,每个矩形的下半部分都使用了样式形成了半透明效果:
context.fillStyle = “rgb(0, 162, 232)”;
context.fillRect(40, 55, 145, 145);
context.fillStyle = “rgba(255, 0, 0, 0.2)”;
context.fillRect(75, 105, 145, 145);
其中rgba中比传统的rgb多了a,即透明度的含义,a的值也是0到1之间的数字,0表示完全透明,1则是完全不透明。运行结果如下图:
接下来学习如何绘制圆(弧),绘制用到的方法如下:
画圆或者圆弧。x,y为圆心坐标,radius为半径,startAngle,endAngle为开始/结束划圆的角度,anticlockwise为是否逆时针画圆(True为逆时针,False为顺时针)。
注意这里的角度为弧度制,所以如果画一个正圆的话,是Math.PI * 2,而画60°的话,就是60 * Math.PI / 180,比如下面的代码,用fill样式填充了一个黑色的正圆:
context.fillStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 2 * Math.PI, true);
context.fill();
如果要用stroke笔来勾画圆形的话,只需要指定勾画的样式strokeStyle即可,如下代码:
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 2 * Math.PI, true);
context.stroke();
下面是一个画弧度的代码例子:
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 0.5 * Math.PI, true);
context.stroke();
结果如下图:
接下来,我们学习如何画贝塞尔曲线。HTML 5的API中,有一个画这个曲线的很容易的方法bezierCurveTo,相关参数介绍如下:
bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y):为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点,而结束点是 (x, y)。两条贝塞尔曲线控制点 (cpX1, cpY1) 和 (cpX2, cpY2) 定义了曲线的形状。当这个方法返回的时候,当前的位置为 (x, y)。下面是相关代码:
context.beginPath();
context.moveTo(5, 50);
context.bezierCurveTo(30, 30, 130, 530, 200, 100);
context.stroke();
绘画的图形如下图:
由于有了贝塞尔曲线功能的,因此可以绘制很多不同的图形了,比如下面的代码绘制出一个简单的笑脸图。
context.beginPath();
context.lineWidth = 10;
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(200, 233, 150, 0, 2 * Math.PI, true);
context.stroke();
// 填充面部颜色
context.beginPath();
context.fillStyle = “rgba(80, 100, 80, 0.4)”;
context.arc(200, 233, 150, 0, 2 * Math.PI, true);
context.fill();
// 绘制右眼
context.lineWidth = 20;
context.beginPath();
context.moveTo(230, 130);
context.bezierCurveTo(230, 130, 230, 130, 240, 200);
context.stroke();
// 绘制左眼
context.beginPath();
context.moveTo(170, 130);
context.bezierCurveTo(170, 130, 170, 130, 160, 200);
context.stroke();
// 绘制上唇
context.beginPath();
context.moveTo(100, 230);
context.bezierCurveTo(100, 230, 200, 380, 300, 230);
context.stroke();
// 绘制下唇
context.beginPath();
context.moveTo(100, 235);
context.bezierCurveTo(105, 270, 200, 480, 300, 232);
context.stroke();
显示结果如下图:
目前为止,我们使用的fillStyle都是使用一种单独的颜色去填充图形,而实际上,fillStyle也支持使用多种颜色去填充,比如下面的例子,随机生成了各种颜色去填充画布实现了彩虹的效果:
for (j = 0; j < 100; j++) {
var r = 255, g = 0, b = 0;
for (i = 0; i < 150; i++) {
// 黄色
if (i < 25) g += 10.2;
// 绿色
else if (i >= 25 && i < 50) r -= 10.2;
// 蓝色
else if (i >= 50 && i < 75) {
g -= 10.2;
b += 10.2;
}
// 紫色
else if (i >= 75 && i < 100) r += 10.2;
// 红色
else b -= 10.2;
context.fillStyle = “rgba(” + Math.floor(r) + “,” +
Math.floor(g) + “,” + Math.floor(b) + “,” + a + “)”;
context.fillRect(3 * i, 5 * j, 3, 5); } a -= 0.01; }
如果不想使用以上的方法去生成渐变颜色,可以使用如下的canvas提供的几个方法去简便实现渐变效果:
addColorStop(offset, color) –addColorStop 方法接受 2 个参数,offset参数必须是一个 0.0 与 1.0 之间的数值,表示渐变中颜色所在的相对位置。例如,0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值
createLinearGradient(x0, y0, x1, y1) –该方法接受 4 个参数,表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x0, y0, r0, x1, y1, r1) – 该方法接受 6 个参数,前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。
下面的代码演示了使用渐变的效果:
gradient.addColorStop(0, “#00ABEB”);
gradient.addColorStop(0.5, “yellow”);
gradient.addColorStop(0.8, “green”);
gradient.addColorStop(1, “white”);
context.fillStyle = gradient;
context.fillRect(5, 5, 145, 145);
实现的效果如下图:
开发者值得关注的HTML5新特性:Canvas相关推荐
- 百度开发者大会-《用HTML5新特性开发移动App》PPT分享
今天百度开发者大会,移动互联网分论坛,我的主题演讲<用HTML5新特性开发移动App>PPT分享如下. 完整PPT可在Slideshare观看,或者在百度开放云平台上下载到.
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- html5加js兼容性辅助,解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题...
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
- html5储存类型特点,避免踩雷!你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
- HTML5新特性归纳和同类比较
第一章 HTML5定义 什么是 HTML5? HTML5 是下一代HTML标准. HTML , HTML 4.01的上一个版本诞生于1999年.自从那以后,Web世界已经经历了巨变. HTML5 仍处 ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等 2)增强型表单 表单2 ...
- HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签 基于菜鸟教程的个人向学习笔记 菜鸟教程 文章目录 ...
- HTML5新特性总结 1
文章目录 HTML5 HTML5 浏览器支持 HTML5新元素 HTML5 Canvas 浏览器支持 创建一个画布(Canvas) 使用 JavaScript 来绘制图像 画线.画圆.写字.渐变效果 ...
- html5新特性 gps,老生常谈H5新特性:地理定位
HTML5新特性 1.新的语义标签 2.表单2.0 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理定位 7.拖放API 8.WebWorker 9.WebStorage 10.WebS ...
最新文章
- 产品开发的 11 宗罪
- Ardino基础教程 22_PS2摇杆
- Chroot vsftpd with non-system users (ftp)
- idea编辑springboot,如何打成war包
- Java ThreadLocal的使用
- SAP Data Intelligence Modeler的一些使用截图
- tutte定理证明hall定理_人教社课本现低级错误?“爱因斯坦用相对论证明勾股定理”...
- Git --- 傻瓜内容跟踪器
- VMware: linux起步提示 memory for crashkernel(0*0 to 0*0)not within permissible
- 统计有几个连通分量--hdu 1213 并查集
- 【bzoj2806】[Ctsc2012]Cheat 广义后缀自动机+二分+单调队列优化dp
- 【毕业设计6】基于51单片机的红外避障小车
- node.js 执行JS文件连接数据库报错
- pdf.js 跨域 php,JavaScript_js跨域资源共享 基础篇,本文详细介绍了javascript跨域资 - phpStudy...
- Java字符串相关的类详解
- python酒店数据分析_python数据分析实战——AirBnb用户分群
- shell编程中空格的使用
- [深入研究4G/5G/6G专题-45]: 5G Link Adaption链路自适应-1-总体架构
- Java面向对象编程(高级部分)
- 转:医院网络营销存在的弊端
热门文章
- html5 canvas基础与动画开发详解-吴华-专题视频课程
- Android 无障碍实现微信抢红包辅助
- AI抢程序员工作:2040年AI可能代替程序员
- 2016服务器系统进入安全模式,Windows 10进入安全模式的两种方法_win10专业版官网...
- WordPress轻拟物博客主题niRvana
- CORS跨域问题原因和解决方案
- postmain报400_Postman测试@RequestBody发送请求时报400错误
- try catch用法理解
- 刀塔OMG塔防1.26b单机版使用方法
- MySQL读写分离,写完读不到问题如何解决