HTML5 Cavas 第三篇

    耽搁了好长时间,因为中间有过年和一些七七八八的事情.在看了html5关于cavas的讲解,再归纳一下没有提到的一些部分.由于Cavas上我自己用到的部分也很少,所以只能把书上提到的大致写写.

    前一篇写到了Cavas的曲线,这一篇从在canvas显示图片走起.

  3.1 图像

    代码:加载图像

//加载图片new.jpg
var img = new Image();
img.src = "new.jpg";
//图片加载完成后,将其显示在canvas上
img.onload = function(){
    draw();
}

  为new.jpg图片添加了onload处理函数,以保证仅在图像加载完成时才调用主draw函数.这样可以保证后续的调用能够把图片正常显示出来.

    代码:在canvas上显示图像

//用背景图案填充作为树干的矩形
context.drawImage(img,-5,-50,10,50);

  drawImage函数中,除了图片本身外,还指定了x、y、width、height参数.进行调整以适应预定的像素树干区域.(10X50)

  3.2 渐变

    渐变是指颜色集上使用逐步抽样算法,并将结果应用于描边样式和填充样式中.

    使用渐变三个步骤:

1.   创建渐变对象;
2.   为渐变对象设置颜色,指明过度方式;
3.   在context上为填充样式或者描边样式设置渐变.

    将渐变看做是颜色沿着一条线进行缓慢地变化.要设置显示的颜色,使用addColorStop函数即可.两个参数:颜色和偏移量(0.0-1.0之间的值,代表沿着渐变线渐变的距离有多远).还可以为颜色设置alpha值(例如透明),并且alpha值也是可以变化的.

    代码:使用渐变

//创建用作树干纹理的三阶水平渐变
var trunk = context.createLinearGradient(-5,-50,5,-50);
//树干的左侧边缘是一般程度的棕色
trunk.addColorStop(0,'#663300');
//树干中间偏左的位置颜色要淡一些
trunk.addColorStop(0.4,'#996600');
//树干右侧边缘的颜色要深一些
trunk.addColorStop(1,'#552200');
//使用渐变色填充树干
context.fillStyle = trunk;
context.fillRect(-5,-50,10,50);
//接下来,创建垂直渐变,以用作树冠在树干上投影
var canopyShadow = context.createLinearGradient(0,-50,0,0);
//投影渐变的起点是透明度为50%的黑色
canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
//方向垂直向下,渐变色在很短的距离内迅速渐变至完全透明,这段长度之外的树干上没有投影
canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)');
//在树干上填充投影渐变
context.fillStyle = canopyShadow;
context.fillRect(-5,-50,10,50);

  除了上述用到的线性渐变之外,还支持放射性渐变.(颜色会介于两个指定圆间的锥形区域平滑变化)

    代码:使用放射性渐变

createRadialGradient(x0,y0,r0,x1,y1,r1)

    前三个参数代表以(x0,y0)为圆心,r0为半径的圆,后三个另一个圆.渐变会在两个圆中间的区域出现.

    3.3  背景图

    代码:使用背景图片

var gravel = new Image();
gravel.src = "gravel.jpg";
gravel.onload = function(){
    draw();
}

//用背景图替代棕色粗线条
context.strokeStyle = context.createPattern(gravel,'repeat');
context.lineWidth = 20;
context.stroke();

    3.4 变换

    HTML5 Canavs API 中的变换包括缩放、平移还有旋转.  context.rotate(angle)

    代码:旋转图像

context.save();

//旋转角度参数以弧度为单位
context.rotate(1.57);
context.drawImage(myImage,0,0,100,100);

context.restore();

    3.5 Canvas 文本

    在图像的上部添加标题.操作canvas文本的方式与操作其他路径对象的方式相同:可以描绘文本轮廓和填充文本内容;同时也可用于其他的变换方式.

    context对象的文本绘制功能由两个函数组成:

•   fillText(text,x,y,maxwidth)
•   strokeText(text,x,y,maxwidth)

    参数包括文本参数以及用于指定文本位置的坐标参数.maxwidth是可选参数,用于限制字体大小.

    代码:使用canvas文本

//在canvas上绘制标题文本
context.save();
//字号为60px,字体为impact
context.font = "60px impact";
//将文本填充为棕色
context.fillStyle = '#996600';
//将文本设为居中对齐
context.textAlign = 'center';
//在canvas顶部中央的位置,以大字体的形式显示文本
context.fillText('Happy Trails! Cj!',200,60,400);
context.restore();

    3.6  Canvas 的安全机制

    如果canvas中的图片并非来自包含它的页面所在的域,页面中的脚本将不能取得其中的数据.

    然而,在没有canvas API以前,无法使用编程的方式获取下载图片的像素信息.来自其他网站的私有图片可以显示在本地,但无法被读取或复制.如果允许脚本读取本地之外的图像数据,那么整个网络中的用户照片以及其他敏感的在线图片都将被"无限制共享".

    所以,为了避免如此.在getImageData函数被调用的时候,如果canvas中的图像来自其它域,就会抛出安全异常.这样,只要不获取显示着其它域中图片的canvas的数据,那么就可以随着呈现这些远程图片.要注意这个限制条件,使用安全的渲染条件.

   到这,大致的HTML5 Canvas API 的讲解就结束了.接下来,如果有时间的话,就增加几个应用的例子.