0501网页涂鸦板

最新推荐文章于 2020-06-30 11:20:33 发布

叫我小袁就好

最新推荐文章于 2020-06-30 11:20:33 发布

阅读量399

点赞数 1

本文链接：https://blog.csdn.net/qq_42788101/article/details/90573193

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页涂鸦板</title>
</head>
<body>
<center>
    <canvas id="cavsElem"></canvas>
</center>
<script>
    (function() {
        var canvas = document.getElementById('cavsElem');
        var context = canvas.getContext('2d');
        canvas.width = 900;
        canvas.height = 600;
        canvas.style.border = "1px solid #000";
        canvas.onmousedown = function (e) {
            var x = e.clientX - canvas.getBoundingClientRect().left;
            var y = e.clientY - canvas.getBoundingClientRect().top;
            context.beginPath();
            context.moveTo(x, y);
            canvas.onmousemove = function (event) {
                var x = event.clientX - canvas.getBoundingClientRect().left;
                var y = event.clientY - canvas.getBoundingClientRect().top;
                context.lineTo(x, y);
                context.stroke();
            };
            canvas.onmouseup = function (event) {
                canvas.onmousemove = null;
            };
        };
    }());


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

袁同学——2019年5月26日

叫我小袁就好

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
0501网页涂鸦板

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页涂鸦板</title></head><body><center> <canvas id="cavsElem"&g...
复制链接

扫一扫