H5 canvas 直线和三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas>

<script>
    window.onload = function(){
        var canvas = document.getElementById('canvas');
        canvas.width = 1024;
        canvas.height = 768;
        var cxt = canvas.getContext("2d");
        cxt.moveTo(100,100);
        cxt.lineTo(300,300);
        cxt.lineTo(100,300);
        cxt.lineTo(100,100);

        cxt.fillStyle = "rgb(2,100,30)";
        cxt.fill();

        cxt.lineWidth = 1;
        cxt.strokeStyle = "red";
        cxt.stroke();
        cxt.closePath();
        cxt.moveTo(100,400)
        cxt.lineTo(400,400)
        cxt.lineTo(300,400)
        cxt.strokeStyle = "green";
        cxt.stroke();
    }
</script>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas>

<script>
    window.onload = function(){
        var canvas = document.getElementById('canvas');
        canvas.width = 1024;
        canvas.height = 768;
        var cxt = canvas.getContext("2d");
        cxt.moveTo(100,100);
        cxt.lineTo(300,300);
        cxt.lineTo(100,300);
        cxt.lineTo(100,100);

        cxt.fillStyle = "rgb(2,100,30)";
        cxt.fill();

        cxt.lineWidth = 1;
        cxt.strokeStyle = "red";
        cxt.stroke();
        cxt.closePath();
        cxt.moveTo(100,400)
        cxt.lineTo(400,400)
        cxt.lineTo(300,400)
        cxt.strokeStyle = "green";
        cxt.stroke();
    }
</script>
</body>
</html>