canvas 画线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
    </canvas>


    <script>
        window.onload = function () {
            var canvas = document.getElementById("canvas");

            canvas.width = 1024;
            canvas.height = 768;

            // 使用canvas绘制
            if (canvas.getContext('2d')) {
                var context = canvas.getContext('2d');

                // 画线
                context.moveTo(100,100);
                context.lineTo(700,700);
                context.stroke();

            } else {
                alert("当前浏览器不支持canvas");
            }


        }
    </script>
</body>
</html>

这样就能画出线了。

posted @ 2018-04-14 18:53  TBHacker  阅读(815)  评论(0编辑  收藏  举报