HTML5 canvas鼠标画图

最新推荐文章于 2024-07-27 09:49:03 发布

Hope Fancy

最新推荐文章于 2024-07-27 09:49:03 发布

阅读量822

点赞数

分类专栏：前端 js css

本文链接：https://blog.csdn.net/Meetacoo/article/details/100993354

版权

前端同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>canvas鼠标画图</title>
    <style>
        body {
            background-color: yellow;
        }
        div {
            width: 400px;
            margin: 0 auto;
        }
        #c1 {
            background-color: white;
        }
    </style>
    <script>
        var test = window.devicePixelRatio
        console.log(test);
        window.onload = function () {
            var oC = document.getElementById('c1');
            var oCG = oC.getContext('2d');
            oC.onmousedown = function (ev) {
                var ev = ev || window.event;
                oCG.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
                //ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop鼠标在当前画布上X,Y坐标
                document.onmousemove = function (ev) {
                    var ev = ev || window.event;//获取event对象
                    oCG.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
                    oCG.stroke();
                };
                oC.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        };
    </script>
</head>
    <body>
        <div>
            <canvas id="c1" width="400px" height="200px"> <!--宽高写在html里，写在css里有问题-->
                <span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->
            </canvas>
        </div>
    </body>
</html>