码迷,mamicode.com
首页 > 其他好文 > 详细

【Canvas】树冠

时间:2014-07-22 22:51:16      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   width   io   

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id=‘drawRect‘ width=‘300‘ height=‘300‘></canvas>
</body>
</html>
function darwTrails(){
  var canvas = document.getElementById(‘drawRect‘);
  var context = canvas.getContext(‘2d‘);
  context.save();
  context.translate(130,250);
  createTree(context);
  context.restore();
}

function createTree(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.lineWidth=4;
  context.lineJoin =‘round‘;
  context.strokeStyle=‘#663300‘;
  context.lineCap=‘butt‘;
  context.fillStyle=‘#339900‘;
  context.fill();
  context.closePath();
  context.stroke();
//树干

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


}

window.addEventListener(‘load‘,darwTrails,true);

【Canvas】树冠,布布扣,bubuko.com

【Canvas】树冠

标签:style   blog   color   os   width   io   

原文地址:http://www.cnblogs.com/positive/p/3855394.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!