画布线条图无法显示

时间:2016-02-29 02:18:06

标签: javascript html5 canvas

我正在研究如何使用HTML5画布的基本功能。这段代码应该生成一棵树,但它没有这样做,任何人都可以提供任何想法吗?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
    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.stroke();
    context.restore();
}
</script>



<style>
</style>
</head>
<body>

<canvas id="diagonal" style="border: 1px solid;" height="200" width="200"></canvas>


</body> 
</html>

我非常感谢任何帮助。

谢谢。

0 个答案:

没有答案