绘制画画板代码

最新推荐文章于 2024-08-25 21:41:11 发布

不想写，还得写，写就写，慢慢写

最新推荐文章于 2024-08-25 21:41:11 发布

阅读量107

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_74331185/article/details/128195147

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #canvas{
        border: 1px solid black ;
        position: relative;
        top:100px;
        left:200px
    }

    </style>
</head>
<body>
    <!-- 定义一个画布区域 -->
    <canvas id="canvas" width="800" height="500">您的浏览器不支持</canvas>
    <script>
        let cvs = document.querySelector("#canvas")
        //通过canvas对象获取上下文对象
        let cxt=cvs.getContext("2d")
         //绑定鼠标按下事件
         cvs.onmousedown=function(event){
            cxt.moveTo(event.pageX-this.offsetLeft,event.pageY-this.offsetTop) //记录鼠标点击时的X轴和Y轴的坐标
            cvs.onmousemove=function(event){
                cxt.lineTo(event.pageX-this.offsetLeft,event.pageY-this.offsetTop)
                cxt.stroke()
            }
            //当鼠标弹起来的时候不要再继续绘制了
            cvs.onmouseup=function(){
                cvs.onmousemove=null
            }
         }

         //1.定义一个画布区域
         //2.当鼠标在画布上按下的时候，绘制起始点
         //3.当鼠标移动的时候不断地绘制直线
         //4.当鼠标弹起来的时候结束绘制（鼠标移动）
    </script>
</body>
</html>