Canvas 画板

最新推荐文章于 2019-10-27 10:04:48 发布

weixin_34247032

最新推荐文章于 2019-10-27 10:04:48 发布

阅读量73

点赞数

文章标签： javascript ViewUI

Canvas 画板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas draw</title>
</head>

<body>
    <canvas id='myCanvas' width='800' height='600'>
        your browser does not support canvas
    </canvas>
    <script type="text/javascript">
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 800, 600);
    var onoff = false;
    var oldx = -10;
    var oldy = -10;
    var lineColor = 'white';
    var linw = 4;
    c.addEventListener('mousemove', draw, true);
    c.addEventListener('mousedown', down, false);
    c.addEventListener('mouseup', up, false);

    function down(event) {
        onoff = true;
        oldx = event.pageX - 10;
        oldy = event.pageY - 10;
    }

    function up() {
        onoff = false;
    }

    function draw(event) {
        if (onoff == true) {
            var newx = event.pageX - 10;
            var newy = event.pageY - 10;
            ctx.beginPath();
            ctx.moveTo(oldx, oldy);
            ctx.lineTo(newx, newy);
            ctx.strokeStyle = lineColor;
            ctx.lineWidth = linw;
            ctx.lineCap = 'round';
            ctx.stroke();
            oldx = newx;
            oldy = newy;
        }
    }
    </script>
</body>

</html>

weixin_34247032

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas 画板

Canvas 画板&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas draw&lt;/title&gt;&lt;/head&gt;&lt;b
复制链接

扫一扫