HTML5简易画笔

最新推荐文章于 2023-08-01 09:09:53 发布

拼个世界给自己~

最新推荐文章于 2023-08-01 09:09:53 发布

阅读量459

点赞数

分类专栏： Web 文章标签： html5

本文链接：https://blog.csdn.net/weixin_44193063/article/details/106591522

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTPE html>
<html>
<head>
<meta charset = "utf-8">
<title>简易画笔</title>

       //清除路径容器
       c.beginPath();
       //设置起点:鼠标按下的点
       c.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
       //监听鼠标移动过程
       document.onmousemove = function(ev){
           ev=ev || window.event;
           c.strokeStyle="red";
           //c.strokeStyle=mycolor;
           c.save();//压入栈
           //设置终点
           c.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
           //弹出栈
           c.restore();
           c.stroke();//绘制路径
       }
       //鼠标松开时执行不绘制的代码
       document.onmouseup = function(ev){
           //将鼠标放开和鼠标移动的监听事件清空
           document.οnmοusemοve=document.οnmοuseup=null;
           //如果有释放对象，就释放全局对象
           if(document.releaseCapture){
               //释放对象
               document.releaseCapture();
           }