1. 程式人生 > >用canvas畫一顆樹頂有雪的松樹

用canvas畫一顆樹頂有雪的松樹

今下午沒事,於是練習畫了一顆松樹,我的方法比較簡單粗暴,不知道有沒有更優雅的畫法,等我找到了再貼上來。先看效果圖:
這裡寫圖片描述

程式碼如下:



畫一顆松樹




var c = document.getElementById(‘myCanvas’);
var ctx = c.getContext(“2d”);

ctx.beginPath();
ctx.moveTo(200,50);
ctx.lineTo(150,100);
ctx.lineTo(180,100);
ctx.lineTo(120,160);
ctx.lineTo(160,160);
ctx.lineTo(90,240);
ctx.lineTo(310,240);
ctx.lineTo(240,160);
ctx.lineTo(280,160);
ctx.lineTo(220,100);
ctx.lineTo(250,100);
ctx.lineTo(200,50);
ctx.fillStyle="green";
ctx.fill();
ctx.lineWidth=4;
ctx.stroke();
ctx.closePath();
//畫樹冠

ctx.beginPath();
ctx.fillStyle="#783b12";
ctx.fillRect(180,240,40,80);
ctx.lineWidth=4;
ctx.strokeRect(180,240,40,80);//矩形秒邊框
ctx.closePath();
//畫樹幹

ctx.beginPath();
ctx.moveTo(200,50);
ctx.lineTo(183,70);
ctx.lineTo(195,65);
ctx.lineTo(200,80);
ctx.lineTo(205,65);
ctx.lineTo(218,70);
ctx.fillStyle= "#fff";
ctx.fill();
ctx.closePath();
//畫樹頂的雪