Canvas绘制小树

最新推荐文章于 2023-03-16 14:58:51 发布

hu-flyyafly

最新推荐文章于 2023-03-16 14:58:51 发布

阅读量2.6k

点赞数 2

分类专栏： Html5 Canvas 文章标签： Canvas

Html5 Canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600"></canvas>
<script language="javascript">
    function createCanopyPath(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.closePath();
    }

    function drawTrails() {
        var canvas = document.getElementById('trails');
        var context = canvas.getContext('2d');

        context.save();
        context.translate(130, 250);

//创建表现树冠的路径
        createCanopyPath(context);

//加宽线条
        context.lineWidth = 4;

//平滑路径的接合点
        context.lineJoin = 'round';

//将颜色改成棕色
        context.strokeStyle = '#663300';

//将这条线绘制到canvas上
        context.stroke();

//将填充色设置为绿色并填充
        context.fillStyle = '#339900';
        context.fill();

//将填充色设为棕色
        context.fillStyle = '#663300';

//填充用作树干的矩形区域
        context.fillRect(-5, -50, 10, 50);

//绘制当前路径
        context.restore();

//保存canvas的状态并绘制路径
        context.save();

        context.translate(-10, 350);
        context.beginPath();

//第一条曲线向右上方弯曲
        context.moveTo(0, 0);
        context.quadraticCurveTo(170, -50, 260, -190);

//第二条曲线向右下方弯曲
        context.quadraticCurveTo(310, -250, 410, -250);

//使用棕色的粗线条来绘制路径
        context.strokeStyle = '#663300';
        context.lineWidth = 20;
        context.stroke();

//恢复之前的canvas状态
        context.restore();
    }

    window.addEventListener("load", drawTrails, true);
</script>
</body>
</html>

hu-flyyafly

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Canvas绘制小树

function createCanopyPath(context) {//绘制树冠 context.beginPath(); context.moveTo(-25, -50); context.lineTo(-10, -80); context.lineTo(-20, -80); context.lineTo(-
复制链接

扫一扫

专栏目录