canvas跟随鼠标移动画带透明度的线

2024-03-23 16:44
文章标签 canvas 鼠标 移动 透明度 跟随 画带

本文主要是介绍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;//底层canvasconst botCan = document.getElementById('myCanvasBot');//顶层canvasconst topCan = document.getElementById('myCanvasTop');//底层画布const botCtx = botCan.getContext('2d');//顶层画布const topCtx = topCan.getContext('2d');//鼠标是否按下  是否移动  是否画图了let isDown = false,isMove = false,isDrawed = false;//需要画图的轨迹let drawPoints = [];//起始点x,ylet 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;//底层canvasconst botCan = document.getElementById('myCanvasBot');//顶层canvasconst topCan = document.getElementById('myCanvasTop');//底层画布const botCtx = botCan.getContext('2d');//顶层画布const topCtx = topCan.getContext('2d');//鼠标是否按下  是否移动  是否画图了let isDown = false,isMove = false,isDrawed = false;//需要画图的轨迹let drawPoints = [];//起始点x,ylet 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;//底层canvasconst botCan = document.getElementById('myCanvasBot');//顶层canvasconst topCan = document.getElementById('myCanvasTop');//底层画布const botCtx = botCan.getContext('2d');//顶层画布const topCtx = topCan.getContext('2d');//鼠标是否按下  是否移动  是否画图了let isDown = false,isMove = false,isDrawed = false;//需要画图的轨迹let drawPoints = [];//起始点x,ylet 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>

在这里插入图片描述

总结

踩坑路漫漫长@~@

这篇关于canvas跟随鼠标移动画带透明度的线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/838939。

相关文章

韦季李输入法_输入法和鼠标的深度融合

韦季李输入法_输入法和鼠标的深度融合

在数字化输入的新纪元，传统键盘输入方式正悄然进化。以往，面对实体键盘，我们常需目光游离于屏幕与键盘之间，以确认指尖下的精准位置。而屏幕键盘虽直观可见，却常因占据屏幕空间，迫使我们在操作与视野间做出妥协，频繁调整布局以兼顾输入与界面浏览。 幸而，韦季李输入法的横空出世，彻底颠覆了这一现状。它不仅对输入界面进行了革命性的重构，更巧妙地将鼠标这一传统外设融入其中，开创了一种前所未有的交互体验。 想象
阅读更多...
我在移动打工的日志

我在移动打工的日志

客户：给我搞一下录音 我：不会。不在服务范围。 客户：是不想吧 我：笑嘻嘻（气笑） 客户：小姑娘明明会，却欺负老人 我：笑嘻嘻 客户：那我交话费 我：手机号 客户：给我搞录音 我：不会。不懂。没搞过。 客户：那我交话费 我：手机号。这是电信的啊！！我这是中国移动！！ 客户：我不管，我要充话费，充话费是你们的 我：可是这是移动！！中国移动！！ 客户：我这是手机号 我：那又如何，这是移动！你是电信！！
阅读更多...
用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

上回我们学到创建一个地形和一个人物，今天我们实现一下人物实现移动和跳起，依次点击，我们准备创建一个C#文件 创建好我们点击进去，就会跳转到我们的Vision Studio，然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类，继承自MonoBehaviour{private Rigidbo
阅读更多...
Unity3D自带Mouse Look鼠标视角代码解析。

Unity3D自带Mouse Look鼠标视角代码解析。

Unity3D自带Mouse Look鼠标视角代码解析。 代码块 代码块语法遵循标准markdown代码，例如： using UnityEngine;using System.Collections;/// MouseLook rotates the transform based on the mouse delta./// Minimum and Maximum values can
阅读更多...
简单的角色响应鼠标而移动

简单的角色响应鼠标而移动

actor类 //处理移动距离，核心是找到角色坐标在世界坐标的向量的投影（x,y,z），然后在世界坐标中合成，此CC是在地面行走，所以Y轴投影始终置为0； using UnityEngine; using System.Collections; public class actor : MonoBehaviour { public float speed=0.1f; CharacterCo
阅读更多...
物联网之流水LED灯、正常流水灯、反复流水灯、移动流水灯

物联网之流水LED灯、正常流水灯、反复流水灯、移动流水灯

MENU 硬件电路设计软件程序设计正常流水LED灯反复流水LED灯移动流水LED灯 硬件电路设计 材料名称数量直插式LED1kΩ电阻杜邦线(跳线)若干面包板1 每一个LED的正极与开发板一个GPIO引脚相连，并串联一个电阻，负极接GND。 当然也可以选择只使用一个电阻。 软件程序设计 正常流水LED灯 因为要用到多个GPIO引脚，所以最好把所有的GPI
阅读更多...
12C 新特性，MOVE DATAFILE 在线移动 包括system， 附带改名 NID ，cdb_data_files视图坏了

12C 新特性，MOVE DATAFILE 在线移动 包括system， 附带改名 NID ，cdb_data_files视图坏了

ALTER DATABASE MOVE DATAFILE  可以改名 可以move file，全部一个命令。 resue 可以重用，keep好像不生效！！！ system照移动不误-------- SQL> select file_name, status, online_status from dba_data_files where tablespace_name='SYSTEM'
阅读更多...
《C++中的移动构造函数与移动赋值运算符：解锁高效编程的最佳实践》

《C++中的移动构造函数与移动赋值运算符：解锁高效编程的最佳实践》

在 C++的编程世界中，移动构造函数和移动赋值运算符是提升程序性能和效率的重要工具。理解并正确运用它们，可以让我们的代码更加高效、简洁和优雅。 一、引言 随着现代软件系统的日益复杂和对性能要求的不断提高，C++程序员需要不断探索新的技术和方法来优化代码。移动构造函数和移动赋值运算符的出现，为解决资源管理和性能优化问题提供了有力的手段。它们允许我们在不进行不必要的复制操作的情况下，高效地转移资源
阅读更多...
创建一个大的DIV，里面的包含两个DIV是可以自由移动

创建一个大的DIV，里面的包含两个DIV是可以自由移动

创建一个大的DIV，里面的包含两个DIV是可以自由移动 <body>         <div style="position: relative; background:#DDF8CF;line-height: 50px"> <div style="text-align: center; width: 100%;padding-top: 0px;"><h3>定&nbsp;位&nbsp;
阅读更多...
C# 通过拖控件移动窗体

C# 通过拖控件移动窗体

目录 引言一、通过控件事件移动窗体1、创建窗体界面2、添加控件事件3、添加代码 二、通过windowsAPI移动窗体1、 构建窗体和添加事件2、代码展示 引言 在C#Form窗体设计中，如果我们不需要使用默认边框设计自己个性化的窗体（FromBorderStyle=none时），这时候你会发现拖动窗体的功能就没有了，这里需要自己构建方法让用户可以拖动整个窗体，这里我们使用前辈的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2