h5 canvas 鼠标绘画

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

石界星空

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

阅读量1.8k

点赞数

分类专栏： js h5开发

本文链接：https://blog.csdn.net/stone10086/article/details/73189224

版权

js 同时被 2 个专栏收录

69 篇文章 1 订阅

订阅专栏

h5开发

8 篇文章 0 订阅

订阅专栏

中心思想：
1、利用鼠标事件获取鼠标的即时坐标，与拖动事件差不多，将坐标赋给LineTo（）；
2、利用canvas进行绘画；

效果图：

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标随意绘画</title>
        <style type="text/css">
            canvas{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="box" width="1000" height="600"></canvas>
    </body>
    <script type="text/javascript">
        var box=document.getElementById('box');
        var oc=box.getContext('2d');
        box.onmousedown=function(e){
            e=e||window.event;
            var ox=e.clientX-box.offsetLeft;
            var oy=e.clientY-box.offsetTop;
            oc.moveTo(ox,oy);
            document.onmousemove=function(e){
                var ox1=e.clientX-box.offsetLeft;
                var oy1=e.clientY-box.offsetTop;
                oc.lineTo(ox1,oy1);
                oc.stroke();
                oc.strokeStyle='red';
            }
            document.onmouseup=function(){
                document.onmousemove=document.onmouseup=null;
            }
        }
    </script>
</html>