canvas画带透明度的直线和涂鸦
提示：canvas画线
文章目录
- 前言
- 一、带透明度的直线和涂鸦
- 总结
前言
一、带透明度的直线和涂鸦
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%);}.cf{content: '';display: block;overflow: hidden;clear: both;}.fl{float: left;}.fr{float: right;}.bg_img{width: 674px;height: 495px;background: #ddd;}.img_tools{position: absolute;top: 20px;left: 50%;transform: translateX(-50px);border: 1px solid #eee;border-radius: 64px;height: 64px;line-height: 64px;box-sizing: border-box;padding: 15px 20px 0;}.img_tool{height: 32px;line-height: 32px;color: #000;font-size: 14px;text-align: center;width: 80px;border: 1px solid #ddd;border-radius: 32px;margin-right: 10px;cursor: pointer;}.img_tool_active{color: #409EFF;border: 1px solid #409EFF;}</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><div class="img_tools cf"><div class="img_tool img_tool_active fl" onclick="changeType('curve',this)">涂鸦</div><div class="img_tool fl" onclick="changeType('line',this)">直线</div></div><script>const canvasWidth = 674;const canvasHeight = 495;//底层canvasconst botCan = document.getElementById('myCanvasBot');//顶层canvasconst topCan = document.getElementById('myCanvasTop');//底层画布const botCtx = botCan.getContext('2d');//顶层画布const topCtx = topCan.getContext('2d');topCtx.lineCap = 'round';topCtx.lineJoin = 'round';//鼠标是否按下 是否移动let isDown = false,isMove = false;//鼠标是否在canvas上抬起let isCanUp = false;//需要画图的轨迹let drawPoints = [];//起始点x,ylet startPoint = {x:0,y:0};//图片历史let imgHistory = [];//icon历史// let partHistory = [];//操作类型let drawType = 'curve';//鼠标按下const mousedown = (e)=>{isDown = true;let x = (e||window.event).offsetX;let y = (e||window.event).offsetY;startPoint = {x,y};drawPoints.push([{x,y}]);topCtx.strokeStyle = 'rgba(255,0,0,0.2)';topCtx.lineWidth = 10;topCtx.beginPath();topCtx.moveTo(x,y);}//鼠标移动const mousemove = (e)=>{let x = (e||window.event).offsetX;let y = (e||window.event).offsetY;if(isDown){isMove = true;switch(drawType){case 'curve':drawCurve(x,y);break;case 'line':drawLine(x,y);break;}}}//鼠标抬起const mouseup = (e)=>{isCanUp = true;if(isDown){// topCan内容画到botCan上topToBot();}}//topCan内容画到botCan上const topToBot = ()=>{//把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);//botCan画完之后，重置canvas的mouseup isCanUpif(isCanUp)isCanUp=false;}drawPoints = [];isDown = false;isMove = false;}//画透明度直线const drawLine = (x,y)=>{if(!isDown)return;//清空当前画布内容topCtx.clearRect(0,0,canvasWidth,canvasHeight);//必须每次都beginPath 不然会卡topCtx.beginPath();topCtx.moveTo(startPoint.x,startPoint.y);topCtx.lineTo(x,y);topCtx.stroke();}//画带透明度涂鸦const drawCurve = (x,y)=>{drawPoints.push({x,y});//清空当前画布内容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();}//切换操作const changeType = (type,that)=>{if(drawType == type) return;let tools = document.getElementsByClassName('img_tool');for(let i=0;i<tools.length;i++){let ele = tools[i];if(ele.classList.contains('img_tool_active'))ele.classList.remove('img_tool_active'); //ele.removeClassName('img_tool_active');}that.classList.add('img_tool_active');drawType = type;}//canvas添加鼠标事件topCan.addEventListener('mousedown',mousedown);topCan.addEventListener('mousemove',mousemove);topCan.addEventListener('mouseup',mouseup);//全局添加鼠标抬起事件document.addEventListener('mouseup',(e)=>{let x = (e||window.event).offsetX;let y = (e||window.event).offsetY;if(!isCanUp){if(drawType == 'line'){let clientX = topCan.getBoundingClientRect().x;let clientY = topCan.getBoundingClientRect().y;drawLine(x-clientX,y-clientY);}// topCan内容画到botCan上topToBot();}});//全局添加鼠标移动事件document.addEventListener('mousemove',(e)=>{if(isMove)return isMove = false;let x = (e||window.event).offsetX;let y = (e||window.event).offsetY;if(drawType == 'line'){let clientX = topCan.getBoundingClientRect().x;let clientY = topCan.getBoundingClientRect().y;drawLine(x-clientX,y-clientY);}});</script>
</body>
</html>
总结
踩坑路漫漫长@~@
相关文章：
canvas画带透明度的直线和涂鸦
提示：canvas画线 文章目录 前言一、带透明度的直线和涂鸦总结 前言 一、带透明度的直线和涂鸦 test.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content…...
linux命令 curl忽略https证书
curl https://www.baidu.com 会提示需要htttps证书，加 -k 即可，如下： curl -k https://www.baidu.com 如果要带头部，认证数据，加-H curl -s -k -H "Authorization: Bearer 651fasgassssgjage2" https:/…...
游戏引擎中网络游戏的基础
一、前言 网络游戏所面临的挑战： 一致性：如何在所有的主机内都保持一样的表现可靠性：网络传输有可能出现丢包安全性：反作弊，反信息泄漏。多样性：不同设备之间链接，比如手机，ipad&a…...
中常用的知识点总结（包含示例代码）)
ES6(ECMAScript 6)中常用的知识点总结（包含示例代码）
ES6(ECMAScript 6)是JavaScript语言的最新版本,它在ES5的基础上做了很多增强和扩展，使JavaScript的编程模式更加现代化和优雅,不仅拓展了语言表达能力,也为编程带来了全新的编程范式和思维方式。在项目中使用ES6,让代码更加简洁、方便模块化和面向对象实现等&#x…...
老师人手必备的教学神器有哪些？这5款教学软件一定要知道！
教师职业生活中有哪些“神器”？对老师来说堪称神器的东西有很多，笔者虽不是老师，工作内容有所不同，但工作给人带来的心力消耗（心累/压力/焦虑）、身体上的疲惫（困）等等，这…...
华为机试题-核酸检测人数
题目 为了达到新冠疫情精准防控的需要，为了避免全员核酸检测带来的浪费，需要精准圈定可能被感染的人群。现在根据传染病流调以及大数据分析，得到了每个人之间在时间、空间上是否存在轨迹的交叉。现在给定一组确诊人员编号 (X1, X2, X3, …, n…...
SQLAlchemy模型映射提示declarative_base() takes 0 positional arguments but 1 was given
原码： #SQLAlchemy模型映射表结构. from sqlalchemy import create_engine,Column,Integer,String from sqlalchemy.ext.declarative import declarative_base# 数据库的变量 HOST 127.0.0.1 PORT 3306 DATA_BASE itbz USER root PWD 123456 DB_URL fmysqlpy…...
linux系统Kubernetes工具ingress暴露服务
Ingress Ingressingress详解创建 Ingress 资源部署 Ingress 控制器（Nginx）下载ingress controller创建ingress-controller测试ingress创建两个应用和service配置ingress转发文件 修改ingress转发类型 Ingress 暴露服务基于域名的虚拟主机 Ingress 》ing…...
centos2anolis
我的centos7原地升级到anolis7记录 注意：如果是桌面版请先卸载firefox，否则so文件冲突。 参考： CentOS 7和8Linux系统迁移到国产Linux龙蜥Anolis OS 8手册_disable pam_pkcs11 module in pam configuration-CSDN博客 关于 CentOS 迁移龙蜥…...
Cesium安装部署运行
目录 1.简介 2.Cesium项目下载 3.Cesium项目运行 4.cesium运行 1.简介 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支…...
【Android 内存优化】KOOM线程泄漏监控的实现源码分析
文章目录 线程monitor的流程怎么判断线程是否泄漏AddThreadJoinThreadExitThreadDetachThread 总结 前面我们通过研究KOOM的开源代码，研究了关于Java层和native层内存泄漏监控的实现原理。还剩下线程泄漏这部分没有进行分析，今天来补全它。整体下来&…...
【爬虫基础】第1讲 网络爬虫基本知识
什么是网络爬虫 网络爬虫（Web crawler）是一种自动化程序，用于在互联网上收集信息。它可以通过扫描和解析网页的超链接，自动访问网页并抓取所需的数据。网络爬虫常用于搜索引擎和数据采集工具中。 作用 通过有效的爬虫手段批量采…...
scrapy爬虫框架
scrapy爬虫框架 一、scrapy的概念作用和工作流程1、scrapy的概念2、scrapy框架的作用3、scrapy的工作流程（重点）3.1 回顾之前的爬虫流程3.2 改写上述流程3.3 scrapy的流程3.4 scrapy的三个内置对象3.5 scrapy中每个模块的具体作用 二、scrapy的入门使用1…...
【深度学习】基础知识
吴恩达DeepLearning Python # 1.numpy c c.ravel() 将多维数组拉平 # 2.time tic time.time() toc time.time() print(str(1000*(toc- tic))"ms")...
Electron应用自动更新实现及打包部署全攻略
Electron应用自动更新实现及打包部署全攻略 Electron自动更新原理配置更新服务器打包与发布更新全攻略实战步骤部署与测试部署更新测试更新流程错误处理与调试 高级特性与优化用户体验与反馈安全与隐私保护维护与持续集成性能优化结语 在现代跨平台桌面应用开发领域中ÿ…...
【爬虫基础】第6讲 opener的使用
在爬虫中，opener是一个用来发送HTTP请求的对象。它可以用来模拟浏览器发送请求，包括设置请求头、处理Cookie等操作。使用opener可以实现一些高级功能，如模拟登录、处理验证码等。 方法1： from urllib.request import Request,bu…...
Milvus 向量数据库：如何基于docker-compose在本地快速搭建测试环境
文章目录 1. 安装 milvus1.1. milvus v2.3.12版本信息1.2. 安装milvus步骤1.3. 安装管理工具Attu1.4. 将Attu由docker-compose启动参考Milvus 向量数据库专为向量查询与检索设计，能够为万亿级向量数据建立索引，详见介绍请参见： milvus: 专为向量查询与检索设计的向量数据库 …...
python --dejavu音频指纹识别
Dejavu是一个用于音频指纹识别的Python库，它能够将音频文件转换成独特的指纹，然后通过比对数据库中已知音频的指纹，识别出输入音频的来源或相似音频。Dejavu库支持多种类型的音频文件，包括MP3、WAV等，同时也支持在不同…...
完全二叉树的层序遍历[天梯赛]
文章目录 题目描述思路 题目描述 输入样例 8 91 71 2 34 10 15 55 18 输出样例 18 34 55 71 2 10 15 91思路 完全二叉树最后一层可以不满，但上面的每一层的节点数都是满的 后序遍历的顺序为"左右根"，我们可以用数组模拟完全二叉树，…...
C语言看完我这篇编译与链接就够啦！！！
1. 前言 Hello！大家好我是小陈，今天来给大家介绍最详细的C语言编译与链接。 2. 编译和链接 我们通常用的编译器，比如Visual Sudio,这样的IDE(集成开发环境）一般将编译和链接的过程一步完成，通常将这这种编译和链接合…...
Comsol 仿真纳米孔超表面的手性响应：探索微观世界的光学奥秘
comsol仿真纳米孔超表面的手性响应在光学领域，超表面以其独特的亚波长结构展现出对光的卓越操控能力，而手性超表面更是其中的璀璨明珠，能够对不同旋向的圆偏振光产生特异响应。今天咱们就来聊聊如何用 Comsol 对纳米孔超表面的手性响应进行仿…...
GuwenBERT：重构古文智能理解的3个技术维度
GuwenBERT：重构古文智能理解的3个技术维度 【免费下载链接】guwenbert GuwenBERT: 古文预训练语言模型（古文BERT） A Pre-trained Language Model for Classical Chinese (Literary Chinese) 项目地址: https://gitcode.com/gh_mirrors/gu/g…...
小迪安全第9天：算法逆向与加密解密基础
一、加密算法分类与核心特征1.1 三大加密类型对比表格类型代表算法核心特点解密条件成功率单向散列加密MD5、SHA、MAC、CRC不可逆、固定输出、碰撞破解只需密文依赖明文复杂度对称加密AES、DES、3DES加解密用同一密钥、速度快密文密钥模式偏移量99.9%非对称加密RSA、SSL、PKCS公…...
LM2675 DC/DC降压芯片内部电路解析与应用
1. DC/DC降压芯片LM2675内部电路深度解析1.1 芯片架构概述LM2675是一款典型的非同步模式BUCK架构DC/DC降压芯片，其核心功能是通过内部PWM控制器驱动外部功率MOS管，配合外部二极管实现高效电压转换。芯片内部集成了完整的控制环路，通过FB引脚检…...
基于高频脉冲注入法的转子初始位置辨识算法代码及其应用
基于高频脉冲注入法转子初始位置辨识算法代码，无感启动中最重要的便是初始位置估计，高频注入法无感运行的方法适用于带电机运行，用在初始位置检测时，时间不固定，依赖电机参数。 采用脉冲注入法后，检测时间固…...
【磁盘】gdisk 实战：分区创建与删除的完整流程解析
1. 认识gdisk：你的磁盘分区利器 第一次接触磁盘分区工具时，我完全被各种专业术语搞晕了。直到遇到gdisk，才发现原来分区可以这么简单。gdisk是Linux环境下专门用于GPT分区表的交互式工具，相比传统的fdisk，它支持更大容…...
影墨·今颜GPU利用率提升方案：4-bit NF4量化让FLUX.1-dev响应提速300%
影墨今颜GPU利用率提升方案：4-bit NF4量化让FLUX.1-dev响应提速300% 1. 引言：当艺术创作遇上性能瓶颈 如果你用过AI绘画工具，尤其是那些追求极致写实效果的，大概率经历过这样的等待：输入一段精心构思的描述ÿ…...
3个让Mac窗口管理效率倍增的秘密武器：AltTab深度解析
3个让Mac窗口管理效率倍增的秘密武器：AltTab深度解析 【免费下载链接】alt-tab-macos Windows alt-tab on macOS 项目地址: https://gitcode.com/gh_mirrors/al/alt-tab-macos 作为一名从Windows转战macOS的开发者，你是否也曾为窗口切换效率低下…...
springboot-vue+nodejs的旅游个性化定制平台的设计与实现
目录技术栈选型系统架构设计数据库设计核心功能实现推荐算法实现前端界面设计测试部署方案项目进度安排项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作技术栈选型 后端采用Spring Boot框架，提供RESTful API接口。数…...
AI产品经理崛起：技术人转型的新风口
技术浪潮下的职业新机遇人工智能（AI）技术的爆炸式发展正重塑全球产业格局，催生出一系列新兴职业。其中，AI产品经理（AI PM）作为连接技术与商业的桥梁，已成为当下最炙手可热的岗位。数据显示&…...