HTML5 学习手笔二：canvas API 绘制树形图案A

 上篇经过对canvas 画对角线，了解了一些canvas画图基本原理。如今能够利用HTML5 canvas API建立一个场景：带有长跑跑道的树林。

本篇大纲

 

1. 用canvas API绘制树木的树冠
2. 为树冠的边框架加粗而且填充树冠颜色
3. 为树冠创造一个强大的树干
4. 绘制跑道 

用canvas API绘制树木的树冠

原理仍是与上篇画对角线同样，只是步骤增多而已，先看代码：

 

   <script type="text/javascript">
                 function createCanopyPath(context){
                  context.beginPath();
                  
                 context.moveTo(-25,-50);
                 context.lineTo(-10,-80);
                 context.lineTo(-20,-80);
                 context.lineTo(-5,-110);
                 context.lineTo(-15,-110);

                 context.lineTo(0,-140);

                 context.lineTo(15,-110);
                 context.lineTo(5,-110);
                 context.lineTo(20,-80);
                 context.lineTo(10,-80);
                 context.lineTo(25,-50);

                 context.closePath();
                }

         function drawTrails(){
                 var canvas=document.getElementById('diagonal');
                 var context=canvas.getContext('2d');
                
                context.save();
                context.translate(130,250);
                
                createCanopyPath(context);
                context.stroke();
                context.restore();
        }
 window.addEventListener("load",drawTrails, true);
        </script>

复制代码

DEMO效果以下：

上面的代码中有一个特殊的函数叫作closePath。这个函数的行为同lineTo很像，惟一的差异在于closePath会将路径的起始坐标自动做为目标坐标。closePath还会通知canvas当前绘制的图形己经闭合或者造成了彻底封闭的区域。

 

 为树冠的边框架加粗而且填充树冠颜色

 为了使树冠更加形象而且看起来像真的树，不得不利用canvas 的API绘制其图形外观，代码以下：

 

   function drawTrails(){

                 var canvas=document.getElementById('diagonal');
                 var context=canvas.getContext('2d');
                
                context.save();
                context.translate(130,250);
                
                createCanopyPath(context);
                 // 加宽线条
                context.lineWidth=4;
                 // 平滑路径的接合点
                context.lineJoin='round';
                 // 将颜色改为棕色
                context.strokeStyle='#663300';
                
                 // 将填充色设置为绿色并填充树冠
                context.fillStyle='#339900';
                context.fill();
        
                context.stroke();
                context.restore();
        }

复制代码

 

 DEMO效果见下面运行效果：

lineJoin属性设置为round，这是修改当前形状中线段的链接方式，让拐角变得更加油；也能够把lineJoin属性设置成bevel或者miter来变换拐角样式。

strokeStyle属性是为了改变线条颜色。

fillStyle属性是为了设置填充颜色

context 的fill 函数是为了可让canvas对当前图形中全部的闭合路径内部的像素点进行填充，配合fillStyle 填充内部像形点颜色。

 

 为树冠创造一个强大的树干

建立树干有两种方法：

 

1. 用咱们上面学过的使用线条而后配合closePath画树干
2. HTML5 提供了一个强大的填充矩形的函数 fillRect 能够画一块矩形x轴、y轴、须要画的宽度和高度便可 

 

在这里咱们使用fillRect 来构建树干。代码以下：

 

 context.fillStyle='#663300';
                context.fillRect(-5,-50,10,50);

复制代码

 

 效果DEMO以下：

  

与fillRect相关的函数还有：strokeRect和clearRect。strokeRect的做用是基于给出的位置和坐标画出矩形的轮廓，clearRect的做用是清除矩形区域内的全部内容并将它恢复到初始状态，即透明。

 

 

 绘制跑道 

 完成本篇最后一个功能，在小树旁边画上一个跑道。代码以下：

  function drawTrails(){
                 var canvas=document.getElementById('diagonal');
                 var context=canvas.getContext('2d');
                
                context.save();
                context.translate(130,250);
                
                createCanopyPath(context);
                 // 加宽线条
                context.lineWidth=4;
                 // 平滑路径的接合点
                context.lineJoin='round';
                 // 将颜色改为棕色
                context.strokeStyle='#663300';
                
                 // 将填充色设置为绿色并填充树冠
                context.fillStyle='#339900';
                context.fill();
                
                context.fillStyle='#663300';
                context.fillRect(-5,-50,10,50);
        
                context.stroke();
                context.restore();

                context.save();
                context.translate(-10,350);
                context.beginPath();
                context.moveTo(0,0);
                 // 第一条曲线向右上方弯曲
                context.quadraticCurveTo(170,-50,260,-190);
                 // 第二条曲线向右下方弯曲
                context.quadraticCurveTo(310,-250,410,-250);
                context.strokeStyle='#663300';
                context.lineWidth=20;
                context.stroke();
                context.restore();
        } 

复制代码

quadraticCurveTo函数绘制曲线的起点是当前坐标，带有两组(x,y)参数。第二组是指曲线的终点。第一组表明控制点。所谓的控制点位于曲线的旁边，其做用至关于对曲线产生一个拉力。经过高速控制点的位置，就能够改变曲线的曲率。在右上方再画一条同样的曲线，以造成一条路。DEMO效果以下：

 

与quadraticCureTo函数同样的曲线功能还涉及：bezierCurveTo、arcTo和arc函数。这些函数经过多种控制点（如半径、角度和等）让曲线更具可塑性。

 

本文参考自：pro HTML5 Programming.