使用HTML5 Canvas画大树
匿名 · 更新于 2013/12/10
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML5 Canvas画大树</title>
</head>
<body>
<canvas id="canvas" style="border:2px solid #0C0" width="1000" height="1000">您的浏览器不支持HTML5 Canvas标签</canvas>
<script type="text/javascript">
function drawTree(){
var y = 60; //树冠单个冠状的高
var x = 60; //树冠半个冠状的宽
var sgnum = 7; //树冠数量
var bl = parseFloat(2/3); //半个树冠的宽度与树冠阶梯宽度比例
var yd = new Array(500,20); //绘画起始点
var ydr = new Array(); //绘画右侧树冠底部起点
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
/**
*设置canvas样式
*/
context.lineWidth = 4; //加宽线条
context.lineJoin = 'round'; //平滑路径的接合点
context.strokeStyle = '#663300'; //将颜色改成棕色
var diwid = (x+x*(1-bl)*(sgnum-1))*2; //大树底部树冠底边的长度
//绘制树冠
context.beginPath();
context.moveTo(yd[0],yd[1]); //移动
//循环输出左侧树冠
for(var i = 1;i<=sgnum;i++){
if(i!=sgnum){ //如果不是绘制最后一个树冠
for(var j = 1;j>=0;j--){
context.lineTo(yd[0]-(i-(i-j)*bl)*x,yd[1]+i*y);
}
}else if(i==sgnum){ //如果绘制的是最后一个树冠 则需要连通到右侧树冠
for(var j = 1;j>=0;j--){
if(j==1){
context.lineTo(yd[0]-(i-(i-j)*bl)*x,yd[1]+i*y);
}else{
context.lineTo(yd[0]-(i-(i-1)*bl)*x+diwid,yd[1]+i*y);
ydr.push(yd[0]-(i-(i-1)*bl)*x+diwid,yd[1]+i*y);
}
}
}
}
//循环输出右侧树冠
for(var i = sgnum;i>0;i--){
if(i==sgnum){ //绘制的为右侧最底下的树冠 因为之前绘制左侧树冠最后一个树冠的时候 直接连通过来 所以已经完成了右侧树冠的第一步 这里只需要完成第二步即可
context.lineTo(ydr[0]-x,yd[1]+(i-1)*y);
}else if(i!=sgnum){
for(var j = 0;j<=1;j++){
if(j==0){
context.lineTo(ydr[0]-((sgnum-i+j)-(sgnum-i)*bl)*x,yd[1]+i*y);
}else{
context.lineTo(ydr[0]-((sgnum-i+j)-(sgnum-i)*bl)*x,yd[1]+(i-1)*y);
}
}
}
}
context.closePath(); //闭合
context.stroke();
}
window.onload = function(){
drawTree();
}
</script>
</body>
</html>