canvas跟随鼠标移动画带透明度的线（画涂鸦）

提示：canvas画线

文章目录

  • 前言
  • 一、带透明度的线
  • 二、试错，只有lineTo的时候画，只有最后地方是透明度的
  • 三、试错，只存上一次的点，线会出现断裂的情况
  • 总结

前言

一、带透明度的线

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas跟随鼠标移动画透明线</title>
    <style>
        div,canvas,img{
            user-select: none;
        }
        .my_canvas,.bg_img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .bg_img{
            width: 674px;
            height: 495px;
            background: #ddd;
        }
    </style>
</head>
<body>
    <div class="bg_img"></div>
    <canvas id="myCanvasBot" class="my_canvas" width="674" height="495"></canvas>
    <canvas id="myCanvasTop" class="my_canvas" width="674" height="495"></canvas>
    <script>
        const canvasWidth = 674;
        const canvasHeight = 495;
        //底层canvas
        const botCan = document.getElementById('myCanvasBot');
        //顶层canvas
        const topCan = document.getElementById('myCanvasTop');
        //底层画布
        const botCtx = botCan.getContext('2d');
        //顶层画布
        const topCtx = topCan.getContext('2d');
        //鼠标是否按下  是否移动  是否画图了
        let isDown = false,isMove = false,isDrawed = false;
        //需要画图的轨迹
        let drawPoints = [];
        //起始点x,y
        let startPoint = {
            x:0,
            y:0
        };
        //图片历史
        let imgHistory = [];
        //icon历史
        let partHistory = [];
        //鼠标按下
        const mousedown = (e)=>{
            isDown = true;
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            startPoint = {x,y}
            // drawPoints.push({x,y});
            drawPoints.push([{x,y}]);
            topCtx.beginPath();
            topCtx.moveTo(x,y);
        }
        //鼠标移动
        const mousemove = (e)=>{
            if(isDown){
                isMove = true;
                drawCurve(e);
            }
        }
        //鼠标抬起
        const mouseup = (e)=>{
            if(isDown&&isMove){
                isDown = false;
                isMove = false;
                drawPoints = [];
                //把topCan画布生成图片
                let img = new Image();
                img.src = topCan.toDataURL('image/png');
                img.onload = ()=>{
                    partHistory.push(img);
                    //添加到botCtx画布
                    botCtx.drawImage(img,0,0);
                    let historyImg = new Image();
                    historyImg = botCan.toDataURL('image/png');
                    historyImg.onload = ()=>{
                        //添加到历史记录
                        imgHistory.push(historyImg);
                    }
                    //清除topCtx画布
                    topCtx.clearRect(0,0,canvasWidth,canvasHeight);
                }
            }
        }
        //画带透明度涂鸦
        const drawCurve = (e)=>{
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            drawPoints.push({x,y});
            topCtx.strokeStyle = 'rgba(255,0,0,0.2)';
            topCtx.lineWidth = 10;
            //清空当前画布内容
            topCtx.clearRect(0,0,canvasWidth,canvasHeight);
            //必须每次都beginPath  不然会卡
            topCtx.beginPath();
            topCtx.moveTo(drawPoints[0].x,drawPoints[0].y);
            for(let i=1;i<drawPoints.length;i++){
                topCtx.lineTo(drawPoints[i].x,drawPoints[i].y);
            }
            topCtx.stroke();
        }


        //canvas添加鼠标事件
        topCan.addEventListener('mousedown',mousedown);
        topCan.addEventListener('mousemove',mousemove);
        topCan.addEventListener('mouseup',mouseup);
        //全局添加鼠标抬起事件
        document.addEventListener('mouseup',()=>{
            isDown = false;
            isMove = false;
            isDrawed = false;
        });
    </script>
</body>
</html>

在这里插入图片描述

二、试错，只有lineTo的时候画，只有最后地方是透明度的

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas跟随鼠标移动画透明线</title>
    <style>
        div,canvas,img{
            user-select: none;
        }
        .my_canvas,.bg_img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .bg_img{
            width: 674px;
            height: 495px;
            background: #ddd;
        }
    </style>
</head>
<body>
    <div class="bg_img"></div>
    <canvas id="myCanvasBot" class="my_canvas" width="674" height="495"></canvas>
    <canvas id="myCanvasTop" class="my_canvas" width="674" height="495"></canvas>
    <script>
        const canvasWidth = 674;
        const canvasHeight = 495;
        //底层canvas
        const botCan = document.getElementById('myCanvasBot');
        //顶层canvas
        const topCan = document.getElementById('myCanvasTop');
        //底层画布
        const botCtx = botCan.getContext('2d');
        //顶层画布
        const topCtx = topCan.getContext('2d');
        //鼠标是否按下  是否移动  是否画图了
        let isDown = false,isMove = false,isDrawed = false;
        //需要画图的轨迹
        let drawPoints = [];
        //起始点x,y
        let startPoint = {
            x:0,
            y:0
        };
        //图片历史
        let imgHistory = [];
        //icon历史
        let partHistory = [];
        //鼠标按下
        const mousedown = (e)=>{
            isDown = true;
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            startPoint = {x,y}
            // drawPoints.push({x,y});
            drawPoints.push([{x,y}]);
            topCtx.beginPath();
            topCtx.moveTo(x,y);
        }
        //鼠标移动
        const mousemove = (e)=>{
            if(isDown){
                isMove = true;
                drawCurve(e);
            }
        }
        //鼠标抬起
        const mouseup = (e)=>{
            if(isDown&&isMove){
                isDown = false;
                isMove = false;
                drawPoints = [];
                //把topCan画布生成图片
                let img = new Image();
                img.src = topCan.toDataURL('image/png');
                img.onload = ()=>{
                    partHistory.push(img);
                    //添加到botCtx画布
                    botCtx.drawImage(img,0,0);
                    let historyImg = new Image();
                    historyImg = botCan.toDataURL('image/png');
                    historyImg.onload = ()=>{
                        //添加到历史记录
                        imgHistory.push(historyImg);
                    }
                    //清除topCtx画布
                    topCtx.clearRect(0,0,canvasWidth,canvasHeight);
                }
            }
        }
        //画带透明度涂鸦
        const drawCurve = (e)=>{
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            drawPoints.push({x,y});
            topCtx.strokeStyle = 'rgba(255,0,0,0.2)';
            topCtx.lineWidth = 10;
            //清空当前画布内容
            // topCtx.clearRect(0,0,canvasWidth,canvasHeight);
            //必须每次都beginPath  不然会卡
            // topCtx.beginPath();
            // topCtx.moveTo(drawPoints[0].x,drawPoints[0].y);
            // for(let i=1;i<drawPoints.length;i++){
            //     topCtx.lineTo(drawPoints[i].x,drawPoints[i].y);
            // }
            topCtx.lineTo(x,y);
            topCtx.stroke();
        }


        //canvas添加鼠标事件
        topCan.addEventListener('mousedown',mousedown);
        topCan.addEventListener('mousemove',mousemove);
        topCan.addEventListener('mouseup',mouseup);
        //全局添加鼠标抬起事件
        document.addEventListener('mouseup',()=>{
            isDown = false;
            isMove = false;
            isDrawed = false;
        });
    </script>
</body>
</html>

在这里插入图片描述

三、试错，只存上一次的点，线会出现断裂的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas跟随鼠标移动画透明线</title>
    <style>
        div,canvas,img{
            user-select: none;
        }
        .my_canvas,.bg_img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .bg_img{
            width: 674px;
            height: 495px;
            background: #ddd;
        }
    </style>
</head>
<body>
    <div class="bg_img"></div>
    <canvas id="myCanvasBot" class="my_canvas" width="674" height="495"></canvas>
    <canvas id="myCanvasTop" class="my_canvas" width="674" height="495"></canvas>
    <script>
        const canvasWidth = 674;
        const canvasHeight = 495;
        //底层canvas
        const botCan = document.getElementById('myCanvasBot');
        //顶层canvas
        const topCan = document.getElementById('myCanvasTop');
        //底层画布
        const botCtx = botCan.getContext('2d');
        //顶层画布
        const topCtx = topCan.getContext('2d');
        //鼠标是否按下  是否移动  是否画图了
        let isDown = false,isMove = false,isDrawed = false;
        //需要画图的轨迹
        let drawPoints = [];
        //起始点x,y
        let startPoint = {
            x:0,
            y:0
        };
        //上一次的点
        let lastPoint = {
            x:0,
            y:0
        };
        //图片历史
        let imgHistory = [];
        //icon历史
        let partHistory = [];
        //鼠标按下
        const mousedown = (e)=>{
            isDown = true;
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            startPoint = {x,y}
            // drawPoints.push({x,y});
            drawPoints.push([{x,y}]);
            lastPoint = {x,y}
            topCtx.beginPath();
            topCtx.moveTo(x,y);
        }
        //鼠标移动
        const mousemove = (e)=>{
            if(isDown){
                isMove = true;
                drawCurve(e);
            }
        }
        //鼠标抬起
        const mouseup = (e)=>{
            if(isDown&&isMove){
                isDown = false;
                isMove = false;
                drawPoints = [];
                //把topCan画布生成图片
                let img = new Image();
                img.src = topCan.toDataURL('image/png');
                img.onload = ()=>{
                    partHistory.push(img);
                    //添加到botCtx画布
                    botCtx.drawImage(img,0,0);
                    let historyImg = new Image();
                    historyImg = botCan.toDataURL('image/png');
                    historyImg.onload = ()=>{
                        //添加到历史记录
                        imgHistory.push(historyImg);
                    }
                    //清除topCtx画布
                    topCtx.clearRect(0,0,canvasWidth,canvasHeight);
                }
            }
        }
        //画带透明度涂鸦
        const drawCurve = (e)=>{
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            drawPoints.push({x,y});
            topCtx.strokeStyle = 'rgba(255,0,0,0.2)';
            topCtx.lineWidth = 10;
            topCtx.beginPath();
            topCtx.moveTo(lastPoint.x,lastPoint.y);
            topCtx.lineTo(x,y);
            topCtx.stroke();
            lastPoint = {x,y};
        }


        //canvas添加鼠标事件
        topCan.addEventListener('mousedown',mousedown);
        topCan.addEventListener('mousemove',mousemove);
        topCan.addEventListener('mouseup',mouseup);
        //全局添加鼠标抬起事件
        document.addEventListener('mouseup',()=>{
            isDown = false;
            isMove = false;
            isDrawed = false;
        });
    </script>
</body>
</html>

在这里插入图片描述

总结

踩坑路漫漫长@~@

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/486419.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

H5实现Web ECharts教程：轻松创建动态数据图表

H5实现Web ECharts教程：轻松创建动态数据图表

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…
阅读更多...
python面向对象 | 类和对象

python面向对象 | 类和对象

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…
阅读更多...
Mysql事务及存储引擎

Mysql事务及存储引擎

一、Mysql事务 1.1 Mysql事务的概念 所谓事务&#xff0c;它是一个操作序列&#xff0c;这些操作要么都执行&#xff0c;要么都不执行&#xff0c;它是一个不可分割的工作单位。 1.2 事务的ACID特点 事务应该具有的四个特性&#xff1a;原子性&#xff08;Atomicity&#xff09…
阅读更多...
knife4j/swagger救援第一现场

knife4j/swagger救援第一现场

1、前方来报&#xff0c;测试环境springboot项目无法启动&#xff0c;现场如下&#xff1a; Error starting ApplicationContext. To display the auto-configuration report re-run your application with debug enabled. [ERROR] 2024-03-20 12:54:42,718 --main-- [org.spr…
阅读更多...
layui框架实战案例(25):laydate中mark的数据后端生成

layui框架实战案例(25):laydate中mark的数据后端生成

mark&#xff0c;自定义日期标记。该属性是对 calendar 属性的进一步延伸&#xff0c;灵活度更高。属性可批量设置多个日期标记&#xff0c;如&#xff1a; mark: {0-10-14: 生日, //每年每月的某一天0-0-10: 工资, // 每月 10 号2008-8-8: 开幕, // 指定的日期 }其中日期的格式…
阅读更多...
如何在Linux系统使用Docker本地部署Halo网站并实现无公网IP远程访问

如何在Linux系统使用Docker本地部署Halo网站并实现无公网IP远程访问

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 1. Docker部署Halo1.1 检查Docker版本如果未安装Docker可…
阅读更多...
[Linux初阶]which-find-grep-wc-管道符命令

[Linux初阶]which-find-grep-wc-管道符命令

目录 一.which 二.find a.-name b.-size 三.grep 四.wc 五.管道符(|) 五.总结 一.which 语法格式: which [命令] Linux中的一个个命令,本体上就是一个个的二进制可执行程序(相当于windows中的.exe文件). 在Linux中,一切皆文件. which命令:用于查看指定命令的可执行…
阅读更多...
恒创科技：服务器反应慢如何解决？

恒创科技：服务器反应慢如何解决？

​　　通常来说&#xff0c;访问者会在最初的几秒钟内决定是留在您的网站还是离开。如果页面加载时间超过五秒&#xff0c;访问者离开的可能性就会增加 90%。所以&#xff0c;作为站长们&#xff0c;必须减少服务器响应时间&#xff0c;以确保其网站加载速度更快。以下是减少网…
阅读更多...
ceres-solver-1.14.0安装教程

ceres-solver-1.14.0安装教程

引言 简单记录下安装ceres-solver-1.14.0的过程&#xff0c;简单了解。 1、下载安装包 wget ceres-solver.org/ceres-solver-1.14.0.tar.gz 2、安装依赖 sudo apt-get install -y cmake libgoogle-glog-dev libatlas-base-dev libsuitesparse-dev3、 cd ceres-solver-1.14…
阅读更多...
【包远程安装运行】SpringBoot+Mysql+Vue实现的4S店保养与维修系统源码+运行视频+包运行+开发文档

【包远程安装运行】SpringBoot+Mysql+Vue实现的4S店保养与维修系统源码+运行视频+包运行+开发文档

今天发布的是一款由SpringBootVueMysql实现的4S店保养与维修后台管理系统&#xff0c;该系统共分为两个角色&#xff0c;具体的功能如下&#xff1a; 管理员功能&#xff1a;供应商管理、采购管理、品牌管理、维修报单管理、车型管理、配件管理、车辆信息管理、套餐管理、维修记…
阅读更多...
力扣HOT100 - 11. 盛最多水的容器

力扣HOT100 - 11. 盛最多水的容器

解题思路&#xff1a; 双指针&#xff0c;从左右两边往内侧夹逼&#xff0c;遍历后得到最大值 class Solution {public int maxArea(int[] height) {int i 0, j height.length - 1, res 0;while(i < j) {res height[i] < height[j] ? Math.max(res, (j - i) * heig…
阅读更多...
如何在Linux系统使用宝塔面板搭建Inis博客并发布至公网【内网穿透】

如何在Linux系统使用宝塔面板搭建Inis博客并发布至公网【内网穿透】

文章目录 前言1. Inis博客网站搭建1.1. Inis博客网站下载和安装1.2 Inis博客网站测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总…
阅读更多...
Paper Digest｜基于在线聚类的自监督自蒸馏序列推荐模型

Paper Digest｜基于在线聚类的自监督自蒸馏序列推荐模型

论文标题&#xff1a; Leave No One Behind: Online Self-Supervised Self-Distillation for Sequential Recommendation 作者姓名&#xff1a; 韦绍玮、吴郑伟、李欣、吴沁桐、张志强、周俊、顾立宏、顾进杰 组织单位&#xff1a; 蚂蚁集团 录用会议&#xff1a; WWW 2024 …
阅读更多...
【计算机】——51单片机——持续更新

【计算机】——51单片机——持续更新

单片机是一种内部包含CPU、存储器和输入/输出接口等电路的集成电路&#xff08;IC芯片&#xff09; 单片机是单片微型计算机&#xff08;Single Chip Microcomputer&#xff09;的简称&#xff0c;用于控制领域&#xff0c;所以又称为微型控制器&#xff08;Microcontroller U…
阅读更多...
STM32CubeMX 生成的代码框架解析 - 最小化工程篇(含FreeRTOS)

STM32CubeMX 生成的代码框架解析 - 最小化工程篇(含FreeRTOS)

文章目录 前言1. 创建工程说明2. 目录结构介绍2.1 总目录2.2 Core文件夹2.3 Drive文件夹2.4 MKD-ARM2.5 Middlewares2.6 IDE配置文件 3. 重点文件介绍3.1 Core文件夹3.1.1 srcfreertos.cmain.cstm32l4xx_hal_msp.cstm32l4xx_it.csystem_stm32l4xx.c 3.1. 2 includeFreeRTOSConf…
阅读更多...
java 高级面试题（借鉴）（下）

java 高级面试题（借鉴）（下）

雪花算法原理 第1位符号位固定为0&#xff0c;41位时间戳&#xff0c;10位workId&#xff0c;12位序列号&#xff0c;位数可以有不同实现。 优点&#xff1a;每个毫秒值包含的ID值很多&#xff0c;不够可以变动位数来增加&#xff0c;性能佳&#xff08;依赖workId的实现…
阅读更多...
挺后悔，我敷衍地回答了“程序员如何提升抽象思维“

挺后悔，我敷衍地回答了“程序员如何提升抽象思维“

分享是最有效的学习方式。 博客&#xff1a;https://blog.ktdaddy.com/ 大家好&#xff0c;我是老猫。 大概在月初的时候&#xff0c;我发了一篇文章【当程序员之后&#xff1f;(真心话)】,在这篇文章中&#xff0c;提及了抽象思维对一名程序员的重要性。可能说得也比较笼统&a…
阅读更多...
UML 类关系表示

UML 类关系表示

类之间关系&#xff1a;依赖、泛化&#xff08;继承&#xff09;、实现、关联、聚合与组合 类与类、类与接口之间的关系表示&#xff1a; 纵向关系&#xff1a;继承、实现 横向关系&#xff1a;依赖、关联、聚合与组合&#xff0c;从强到弱依次为&#xff1a;组合、聚合、关联…
阅读更多...
文献学习-22-Surgical-VQLA：具有门控视觉语言嵌入的转换器，用于机器人手术中的视觉问题本地化回答

文献学习-22-Surgical-VQLA：具有门控视觉语言嵌入的转换器，用于机器人手术中的视觉问题本地化回答

Authors: Long Bai1† , Mobarakol Islam2† , Lalithkumar Seenivasan3 and Hongliang Ren1,3,4∗ , Senior Member, IEEE Source: 2023 IEEE International Conference on Robotics and Automation (ICRA 2023) May 29 - June 2, 2023. London, UK Abstract: 尽管有计算机辅…
阅读更多...
反沙箱思路总结

反沙箱思路总结

文章目录 反调试反沙箱时间对抗环境检测 反虚拟机黑DLL父进程检测傀儡进程后记 反调试 IsDebuggerPresent #include<windows.h> #include<stdio.h> BOOL check() {return IsDebuggerPresent(); } BOOL isPrime(long long number){if (number < 1)return FALSE…
阅读更多...
最新文章

Copyright @ 2022~2023