用canvas畫一顆樹頂有雪的松樹
阿新 • • 發佈:2019-02-19
今下午沒事,於是練習畫了一顆松樹,我的方法比較簡單粗暴,不知道有沒有更優雅的畫法,等我找到了再貼上來。先看效果圖:
程式碼如下:
畫一顆松樹
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(); //畫樹頂的雪