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

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

---

 

本篇大纲

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.