你的位置:首页 > 网页设计

[网页设计]canvas初探1


刚申请的博客,当然这也是第一篇。对于canvas也是刚开始着手进行学习,有哪些不对的地方,还望看到本篇博文的朋友指正。

1.canvas的历史

首先,它是HTML5的一个标签。

它是为了客户端矢量图形而设计的,它没有自己的行为,它将一个绘图API展现给Javascript,使脚本能够把想绘制的东西都绘制到一块画布上。

其次,它是在Apple的Safari 1.3版本的浏览器中被引用。随后Firefox 1.5和Opera 9也支持了<canvas>标签。之后IE也可以使用<canvas>标签,但是要在IE的VML支持的基础上使用开源的Javascript代码来构建兼容性的画布。参考http://excanvas.sourceforge.net/。

最后,由浏览器厂商非正式协会的推动,使<canvas>标签成为了HTML5草案中一个正式的标签。

2.canvas元素

2.1 canvas元素的方法和属性

canvas的属性

属性描述类型取值范围默认值
width   canvas元素绘图表面的宽度。在默认状态下,浏览器会将canvas元素的大小设定成与绘图表面大小一致。然而,如果在CSS中覆盖了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸。非负整数    在有效范围内的任意非负整数。数值开头可以添加“+”或空格,但是按照规则,不能给数值加px后缀300
heightcanvas元素绘图表面的高度。具体参照对width属性的描述非负整数在有效范围内的任意非负整数。数值开头可以添加“+”或空格,但是按照规则,不能给数值加px后缀300

canvas的方法

属性描述
getContext()返回与该canvas元素相关的绘图环境
toDataURL(type,quality)返回一个数据地址,你可以将其设置为img元素的src属性值。第一个参数指定了图像的类型,例如image/jpeg或image/png。第一参数默认image/png。第二参数必须是0~1.0之间的double值,它表示JPEG图像显示质量
toBlob(callback,type,args…)创建一个用于此canvas元素图像文件的Blob。第一个参数是一个回调函数,浏览器会以一个指向blob的引用为参数,去调用该回调函数。第二个参数以”image/png”这样的形式指定图像类型。最后一个参数介于是0~1.0之间值,表示JPEG图像的质量。将来也会加入其他一些用于精确调控图像属性的参数

讨论:有关canvas元素大小与绘图表面的大小

通过一个简单的例子说明下,如下图所示,是利用canvas达到的效果。

12

 HTML代码

var canvas = document.getElementById("canvas");context=canvas.getContext("2d");context.font = "38pt Arial";context.fillStyle = "cornflowerblue";context.strokeStyle = "blue";context.fillText("Hello Canvas",canvas.width/2 - 150,canvas.height/2 + 15);context.strokeText("Hello Canvas",canvas.width/2 -150,canvas.height/2 + 15);

Example1-1

 

下面是通过CSS来设定canvas的大小,效果图如下。

2

 HTML代码

 

可以看出,元素的大小有明显的改变。

canvas实际上有两套尺寸,一个是元素本身的大小,还有一个是元素绘图表面的大小。

当设置元素的width与height属性时,实际上同时也修改了该元素本身的大小和绘图表面的大小。

当通过CSS设置元素大小时,只会改变元素本身的大小,而不会影响到绘图表面。

默认情况下,canvas元素和其绘图表面的大小时300px*300px。而使用CSS设置后,元素大小增加为600px*300px。绘图表面大小依然是300px*300px。这时浏览器就会对其进行缩放,使其符合元素的大小。当然就出现了上面第二张图所示的情况。