请老师，检查，谢谢

来源：3-4 编程练习

qq_慕移动3101913

2020-02-27 17:04:14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制直线</title>
    <style>
        #mycanvas{
            border: 1px solid pink;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas">
        您的浏览器不支持canvas
    </canvas>

    <script>
        //获取元素
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');   //在上下文进行操作

        //画布实际大小
        canvas.width = 500;
        canvas.height = 300;

        //绘制线条(x,y)
        ctx.moveTo(0,50);
        ctx.lineTo(50,50);
        ctx.lineTo(50,100);
        ctx.lineTo(100,100);
        ctx.lineTo(100,150);
        ctx.lineTo(150,150);
        ctx.lineTo(150,200);
        ctx.lineTo(200,200);
        ctx.lineTo(200,250);
        ctx.lineTo(0,250);
        ctx.stroke();
    </script>
</body>
</html>

写回答

1回答