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(集成开发环境）一般将编译和链接的过程一步完成，通常将这这种编译和链接合…...
ScintillaNET：提升开发效率的专业代码编辑组件深度解析
ScintillaNET：提升开发效率的专业代码编辑组件深度解析 【免费下载链接】ScintillaNET A Windows Forms control, wrapper, and bindings for the Scintilla text editor. 项目地址: https://gitcode.com/gh_mirrors/sc/ScintillaNET 核心价值定位࿱…...
跨平台开源工具OptiScaler：释放显卡潜能的性能优化指南
跨平台开源工具OptiScaler：释放显卡潜能的性能优化指南 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler 你是否曾因显卡…...
高效解决HTML转Word难题：浏览器端无后端文档转换全方案
高效解决HTML转Word难题：浏览器端无后端文档转换全方案 【免费下载链接】html-docx-js Converts HTML documents to DOCX in the browser 项目地址: https://gitcode.com/gh_mirrors/ht/html-docx-js 在数字化办公场景中，将网页内容快速转换为可编…...
如何利用多渠道SEO推广提高网站流量
<h2>多渠道SEO推广：如何提高网站流量</h2> <p>在当前竞争激烈的互联网环境中，网站流量是衡量网站成功与否的重要指标之一。如何利用多渠道SEO推广提高网站流量，成为了每一个网站运营者关注的焦点。本文将从问题分析、原因说…...
Umi-OCR无界面服务化启动指南：将OCR能力无缝集成到自动化工作流
Umi-OCR无界面服务化启动指南：将OCR能力无缝集成到自动化工作流 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件，适用于Windows系统，支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://gitcode…...
Unity开发HoloLens应用：从打包到安装的完整避坑指南（2024最新版）
Unity开发HoloLens应用：从打包到安装的完整避坑指南（2024最新版） 如果你正在尝试将Unity项目部署到HoloLens设备上，可能会遇到各种意想不到的问题。作为一位经历过无数次打包、部署、调试循环的开发者，我想分享一些实战…...
3步实现Mac微信防撤回：零配置本地化解决方案
3步实现Mac微信防撤回：零配置本地化解决方案 【免费下载链接】WeChatIntercept 微信防撤回插件，一键安装，仅MAC可用，支持v3.7.0微信 项目地址: https://gitcode.com/gh_mirrors/we/WeChatIntercept 告别消息遗憾࿱…...
LeRobot SO100主从臂配置全流程：从硬件组装到模型训练
LeRobot SO100主从臂实战指南：从零搭建到智能控制 1. 项目概述与硬件准备 LeRobot SO100作为HuggingFace开源社区推出的机器人学习平台，为开发者提供了从硬件组装到AI模型训练的全套解决方案。这套主从臂系统最吸引人的特点在于其模块化设计——六自由度…...
Qwen3交互界面开发：利用JavaScript实现网页端字幕编辑器
Qwen3交互界面开发：利用JavaScript实现网页端字幕编辑器 1. 引言 做视频的朋友们，不知道你们有没有过这样的经历：用AI工具生成了视频字幕，时间轴对得总差那么一点，要么是话还没说完字幕就跳了，要么是沉默…...
OpenLayers飞机航线动画实战：如何让SVG图标随航线动态转向（附完整代码）
OpenLayers飞机航线动画实战：SVG图标动态转向与轨迹平滑渲染技术解析 在航空监控、物流追踪等地理信息系统中，飞机或运输工具的实时轨迹展示一直是核心需求。传统静态路径显示已无法满足现代交互需求，如何实现图标随航线动态转向的平滑动画成…...