当前位置:编程学习 > html/css >>

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

上篇通过对canvas 画对角线,了解了一些canvas画图基本原理。现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林。
 
本篇大纲
用canvas API绘制树木的树冠
为树冠的边框架加粗并且填充树冠颜色
为树冠创造一个强大的树干
绘制跑道 
用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 填充内部像形点颜色。
 
 
 
 为树冠创造一个强大的树干
创建树干有两种方法:
 
 
用我们上面学过的使用线条然后配合closePath画树干
HTML5 提供了一个强大的填充矩形的函数fillRect 可以画一块矩形x轴、y轴、需要画的宽度和高度即可 
 
 
在这里我们使用fillRect 来构建树干。代码如下:
 
 
 
 context.fillStyle='#663300';
                context.fillRect(-5,-50,10,50);
 
 
 
 效果DEMO如下:
 www.zzzyk.com:作者图片失效
 
 
与f
补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,