用canvas画一颗树顶有雪的松树

最新推荐文章于 2023-08-28 09:22:47 发布

dream0726

最新推荐文章于 2023-08-28 09:22:47 发布

阅读量1.1k

点赞数

分类专栏： html5 文章标签： canvas 2d

本文链接：https://blog.csdn.net/dream0726/article/details/77256864

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今下午没事，于是练习画了一颗松树，我的方法比较简单粗暴，不知道有没有更优雅的画法，等我找到了再贴上来。先看效果图：
这里写图片描述

代码如下：

画一颗松树

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();
//画树顶的雪