代码改变世界

HTML5 学习手笔三:canvas API 绘制树形图案B

2012-02-27 16:26 Terry_龙 阅读(...) 评论(...) 编辑 收藏

继续为上篇的跑道树林添砖加瓦。


 

本篇大纲

  1. 加载图像做为树干的背景
  2. 为树干实现渐变效果
  3. 使用背景图让跑道更加真实
  4. 1):使用HTML5的scale功能缩放树木 。2):使用rotate制造倾倒树木的效果
  5. 为树木添加阳光照射下的阴影效果
  6. 添加文本标题,并为文本增加阴影效果,使用Canvas Shadow API。

 


加载图像做为树干的背景,功能点为:在canvas 中插入图片

上篇使用矩形填充颜色的功能为树冠增加树干,但总体效果并不是很理想,达不到真正树木的要求。我们需要一张更带有树皮纹理的图片做为树干,基本的步骤分为:

  1. 创建图片对象
  2. 为图片对象指定图片来源
  3. 在图片加载完成后,将其显示在canvas上。 

图片:

 

具体功能看代码先:

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

将上文的fillRect方法替换成:

//使用图片的方式画树干
                context.drawImage(bark,-5,-50,10,50); 


 

得到的效果如下:

上面DEMO效果树干看起来显得更有质感了。


 

 为树干实现渐变效果

 有时候会因为光照的原因和视角原因,我们看树干的时候会觉得处于不同颜色,那么在我们本篇的例子中如何实现这一渐变的效果的呢?HTML5 canvas API有提供渐变的功能,要实现这一功能需要最少实现以下三步:

  1. 创建渐变对象
  2. 为渐变对象设置颜色,指明过渡方式
  3.  在context 上下文为其填充样式或者搭边样式设置渐变
添加渐变的代码如下:
//使用渐变方式画树干
                //创建用作树干纹理的三阶水平渐变
                var trunkGradient=context.createLinearGradient(-5,-50,5,50);
                
                //从左到右依次的颜色渐变为:
                //位于最左边的颜色0
                trunkGradient.addColorStop(0,'#663300');

                //中间偏左的位置0.4
                trunkGradient.addColorStop(0.4,'#996600');

                //最右边的位置1
                trunkGradient.addColorStop(1,'#552200');

                context.fillStyle=trunkGradient;
                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)');
        
                context.fillStyle=canopyShadow;
                context.fillRect(-5,-50,10,50); 

 

DEMO运行效果如下:

 

可以将渐变看做是颜色湍着一条线进行缓慢地变化。例如,如果为渐变对象提供了A、B两个点,不论是绘制还是填充,只要从A移动到B时,都会带来颜色的变化。 

     要设置显示哪种颜色,在渐变对象上使用addColorStop 函数即可。这个函数允许指定两个参数:颜色和偏移量。

     颜色参数是指开发人员希望在偏移位置搭边或填充时所使用的颜色。

     偏移量是一个0.0到1.0之间的数值,代表沿着渐变线渐变的距离有多远。

 


 

 使用背景图让跑道更加真实

 我们让树干加载图片让其更加有质感,为树干设置渐变让其看起来更加真实。跑道我们可以让它加载一张背景图让它看起来像一条砾石的跑道。

图片如下: 

 

 使用代码如下:

var gravel=new Image();
                gravel.src="http://images.cnblogs.com/cnblogs_com/terryblog/gravel.jpg";    
                gravel.onload=function(){
                        drawTrails();
                } 

 将drawTrails 里面的填充样式方法修改为:

  context.strokeStyle=context.createPattern(gravel,'repeat');

 最后我们看到的效果就是这样:

上篇代码使用到了createPattern方法,该方法为创建返回一个CanvasPattern 对象,该对象表示一个贴图图像所定义的模式。要使用一个模式来勾勒线条或填充区域,可以把一个CanvasPattern对象用作stokeStyle 属性或fillStyle 属性的值。

参数描述
image

需要贴图的图像。

这个参数通常是一个 Image 对象,但是也可以使用一个 Canvas 元素。

repetitionStyle 说明图像如何贴图。可能的值如下所示:
  • "repeat" - 在各个方向上都对图像贴图。默认值。
  • "repeat-x" - 只在 X 方向上贴图。
  • "repeat-y" - 只在 Y 方向上贴图。
  • "no-repeat" - 不贴图,只使用它一次。

 提示:

注释:Firefox 1.5 只支持 "repeat" 方式,其他的都被忽略。

 


 1):使用HTML5的scale功能缩放树木 。2):使用rotate制造倾倒树木的效果

为了符合树林的特点,还必须再另外制造树木和倾倒的树木,离可视点的比较近的地方往往我们会觉得看起来比较大。这些功能都可以用HTML的HTML DOM CanvasRenderingContext2D 对象实现。
  1)使用HTML5的scale功能缩放树木,代码如下:

 

  context.save(); 
                context.translate(260,500);
                context.scale(2,2);
                drawTree(context);
                context.restore();

 关于scale 方法的功能描述和语法参考如下:

 

定义和用法

scale() 方法标注画布的用户坐标系统。

语法

scale(sx, sy)

参数

参数描述
sx, sy 水平和垂直的缩放因子。

描述

scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如,传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍,而高度变为原来的 1/2。指定一个负的 sx 值,会导致 X 坐标沿 Y 轴对折,而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。

使用rotate制造倾倒树木的效果,代码如下:

 context.save();
                context.translate(120,520);
                context.scale(1.5,1);
                context.rotate(1.57);
                drawTree(context);

rotate的功能描述和语法参考如下:

定义和用法

rotate() 方法旋转画布的坐标系统。

语法

rotate(angle)

参数

参数描述
angle 旋转的量,用弧度表示。正值表示顺时针方向旋转,负值表示逆时针方向旋转。

描述

rotate() 方法通过指定一个角度,改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射,使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 <Canvas> 元素本身。注意,这个角度是用弧度指定的。

提示:如需把角度转换为弧度,请乘以 Math.PI 并除以 180。 

 那么我们最终可以看到下面这样的效果:

好了,是不是还缺少些什么?


 

  为树木添加阳光照射下的阴影效果

嗯,对了。还少了日照阴影效果。 实现阴影效果通常的做法是重新绘制一遍原来的东西,然后通过倾斜和颜色填充的方法来实现,本篇DEMO也是使用的相同的方法,参考代码见下方:

context.save();
context.transform(1,0,-0.5,1,0,0);
                context.scale(1,0.6);
                context.fillStyle='rgba(0,0,0,0.2)';
                context.fillRect(-5,-50,10,50);
                createCanopyPath(context);
                context.fill();
                context.restore();     

transform参数为:context.transform(m11,m12,m21,m22,dx,dy)

其中:m11,m12,m21,m22四个参数用来修改使用这个方法之后,绘制图形的计算方法,以达到变形目的

         dx表示将坐标原点在x轴上向右移动x个单位
          dy表示将坐标原点在y周上向下移动y个单位 

 

通过上面的代码,添加在drawTree方法中,最终我们看到下面的运行效果:

效果己经不错了。

最后添加点标题字体之类的东西,庆祝一下吧。


 

 添加文本标题,并为文本增加阴影效果,使用Canvas Shadow API

先看一下要实现的效果:

上面效果涉及两点:

  1. 如何在canvas 上添加文本
  2. 如何为文本添加阴影效果 

 

参考代码如下:

 //添加标题

                context.save();
                //指定字体大小,并且指定字体库
                context.font="60px impact";
                context.fillStyle='#996600';
                context.textAlign='center';

                //添加字体的阴影
                context.shadowColor='rgba(0,0,0,0.2)';
                context.shadowOffsetX=15;
                context.shadowOffsetY=-10;
                context.shadowBlur=2;
                //The fillText method takes four parameters (text,x,y,maxWidth).
                context.fillText('My First Html 5 page',200,60,400);

                context.restore();

文本功能的属性介绍 

HTML5 Canvas API 有着强大的文本功能,可以描绘文本轮廓和填充文本内部;同时所有能够应用其他图形的变换和样式都能用于文本。

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

fillText(text,x,y,maxWidth)

strokeText(text,x,y,maxWidth)

 文本涉及到的属性为:

font ->css 字体字符串,如本篇的impact ,italic Arial,scan-serif等

textAlign->start、end、left、right、center 默认是start

textBaseline->top、hanging、middle、alphabetic、ideographic、bottom 默认是alphabetic

 阴影功能的属性介绍

HTML5 还内置了Canvas Shadow API可以为文本添加模糊阴影效果。

阴影使用涉及到的属性为:

shadowColor -> 任何CSS中的颜色值,可以使用透明度

shadowOffsetX -> 像素值,值为正数,向右移动阴影;值为负数,向左移动阴影;

ShadowOffsetY -> 像素值,值为正数,向下移动阴影;值为负数,向上移动阴影; 

shdowBlur -> 高斯模糊值,值越大,阴影边缘越模糊。

注意:

shadowColor 或者其他任意一项属性的值被赋为非默认值时,路径、文本和图片上的阴影效果就会被触发。

 

完。

代码下载:HTML5 Canvas源码

本文参考:pro HTML5 Programming.