1.基本知识
1.1 canvas的基本知识
- canvas元素的大小和绘图表面的大小
- canvas绘图环境及保存和回复
- 基本绘制操作
- 事件处理
1.1.1 canvas 基本知识
canvas是html5元素中功能最强大的一个。这种强大的能力是通过canvas的context对象表现出来的。它提供一套完成的绘图功能,从而使我们可以使用javascript可以操作他们。
我们能用Canvas做些什么?
-
游戏,毫无疑问,相比flash技术,html5基于web的图像显示更加立体,精巧。流行的游戏引擎cocos2d-js、Egret都基于html5的canvas
-
图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作,但Ohad认为大家完全可以用Canvas来实现。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。
-
banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。
-
模拟器:Ohad认为,无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。
-
远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。
-
字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。
-
图形编辑器:Ohad预测,图形编辑器将能够100%基于Web实现。
-
其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。Ohad呼吁大家继续挖掘Canvas的潜力,运用HTML5技术创造更多价值。
先看一个基础的例子:
<canvas id="canvas" width="600" height="500">
Canvas not supported
</canvas>
<script>
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'); // 获取2d上下文
ctx.font = '38pt Arial'; // 设置字体
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.strokeStyle = 'blue'; // 设置描边颜色
// 文字描边
ctx.fillText('hello word', canvas.width / 2 - 150, canvas.height / 2 + 50);
// 绘制文字 填充
ctx.strokeText('hello word', canvas.width / 2 - 150, canvas.height / 2);
</script>
复制代码
效果入下
- 使用document.getElementById()方法获取只想canvas的引用
- 在canvas上调用getContext('2d'),获取绘图上下文,2d必须小写。
- 然后使用绘图api,具体的绘制方法将在后续介绍。
<canvas id="canvas"> Canvas not supported </canvas>
复制代码
这句话的意思,在不支持canvas元素的浏览器会显示这句话,支持的浏览器则不会显示。
注意:
- 设置canvas的width和height属性时虽然都支持px为单位的后缀,但规范要求使用非负的整数。
- 默认的canvas使用框高的,300 ×150个屏幕像素。可以通过制定canvas的width,height指定canvas大小,也可以通过css指定,但css指定大小会出现意外的情况,下面会具体说明。
canvas元素的大小和绘图表面的大小
我们在设置canvas宽搞得时候可以设置width 和 height
<canvas id="canvas" width="300" height="150"></canvas>
复制代码
也可以设置css的width 和 height
canvas{width:600px;height:300px}
复制代码
但画出来实际大小确实怪异的,实际上canvas有两个大小。一个是元素大小,另一个是绘图尺寸大小。
在指定canvas属性width和height的时候,canvas大小和绘图大小相同。绘制不会出现任何问题。
当canvas大小不符合其绘图大小时,浏览器就会对图片进行缩放,适合符合元素大小。 注意:通过width和height属性指定canvas大小是个好主意,如果使用css来修改元素大小,同时又没有指定元素canvas的height和width属性值时,浏览器会缩放后者,使之符合前者大小。可能会导致奇怪的后果
、、、、待更新