canvas跟随鼠标画有透明度的矩形边框

已于 2024-03-26 16:14:57 修改
阅读量439 收藏 4
点赞数 1
分类专栏： canvas涂鸦插件 文章标签： 计算机外设 前端 javascript
于 2024-03-26 15:46:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44434938/article/details/137048313
版权

提示：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(-50%);
            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 class="img_tool fl" onclick="changeType('rect',this)">矩形</div>
        <div class="img_tool fl" onclick="changeType('eraser',this)">橡皮擦</div>
    </div>
    <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');
        topCtx.lineCap = 'round';
        topCtx.lineJoin = 'round';
        //鼠标是否按下  是否移动
        let isDown = false,isMove = false;
        //鼠标是否在canvas上抬起
        let isCanUp = false;
        //需要画图的轨迹
        let drawPoints = [];
        //起始点x,y
        let startPoint = {
            x:0,
            y:0
        };
        //图片历史
        let imgHistory = [];
        //icon历史
        // let partHistory = [];
        //操作类型
        let drawType = 'curve';
        //画线宽度
        const lineWidth = 10;
        //鼠标按下
        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 = lineWidth;
            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;
                    case 'eraser':
                        drawEraser(x,y);
                        break;
                    case 'rect':
                        drawRect(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 isCanUp
                if(isCanUp)isCanUp=false;
            }
            drawPoints = [];
            isDown = false;
            isMove = false;
        }
        //画矩形
        const drawRect = (x,y)=>{
           //清除topCtx画布
           topCtx.clearRect(0,0,canvasWidth,canvasHeight);
            topCtx.beginPath();
            // 矩形
            topCtx.rect(startPoint.x, startPoint.y, x-startPoint.x, y - startPoint.y);
            topCtx.stroke();
        }
        //橡皮擦
        const drawEraser = (x,y)=>{
            //橡皮擦圆形半径
            const radius = lineWidth/2;
            botCtx.beginPath(); 
            for(let i=0;i<radius*2;i++){
                //勾股定理高h
                let h = Math.abs( radius - i); //i>radius h = i-radius; i<radius  h = radius - i
                //勾股定理l
                let l = Math.sqrt(radius*radius -h*h); 
                //矩形高度
                let rectHeight = 1;
                 //矩形宽度
                let rectWidth = 2*l;
                //矩形X
                let rectX = x-l;
                //矩形Y
                let rectY = y-radius + i;

                botCtx.clearRect(rectX, rectY, rectWidth, rectHeight);
            }
        }
        //画透明度直线
        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>

在这里插入图片描述

总结

踩坑路漫漫长@~@

longlongago~~
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用canvas来根据鼠标的移动来画矩形
05-29
根据HTML5中的Canvas,同时根据鼠标的移动来画矩形，可以成功运行，刚开始学，不会，折腾了好久，希望对需要的人有帮助。
canvas笔记-使用canvas画矩形及各样式（透明）
IT1995的博客
05-31 4534
程序运行截图如下： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px a
使用canvas画布实现矩形的绘制（保留上一个绘制的矩形）
Billow_lamb的博客
06-17 1069
/ 每次绘制会清空画布。
Canvas学习记录
weixin_45286211的博客
12-23 1294
canvas学习记录，大部分内容来自mdn官网
【js学习笔记-114】----<canvas>矩形、颜色、透明度、渐变及图案
热门推荐
Will 的专栏
04-02 1万+
矩形、颜色、透明度、渐变及图案（感觉没怎么懂！！先放这吧，回产头再研究） 矩形 CanvasRenderingContext2D对象定义了4个用于绘制矩形的方法 都接受两个参数，其中一个指定矩形的一个顶点，另一个参数指定矩形的宽高 n  fillRect() 使用fillStyle来填充指定矩形。 n  strokeRect() strokeStyle和其它线段的属性来勾勒指定的矩形
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
09-28
// 设置带有透明度的填充颜色并绘制矩形 context.fillStyle = "rgba(0, 0, 0, 0.2)"; context.fillRect(300, 180, 100, 50); } ();"> <canvas width="500" height="300" id="tCanvas" style="border:black 1...
HTML5 在canvas中绘制矩形附效果图
09-28
clearRect(x, y, width, height) 方法用于清除Canvas上指定的矩形区域，将其变为完全透明。这意味着任何在该区域内的图形都将被删除。如`context.clearRect(210, 20, 30, 20)`，会清除一个从(210, 20)开始，宽30...
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
09-28
在进行图形绘制时，还可以通过调整`strokeStyle`、`lineWidth`、`globalAlpha`等属性改变线条颜色、宽度和透明度，或者使用`fillStyle`填充颜色。另外，`lineCap`属性可控制线条端点的样式，`lineJoin`属性决定线条...
Android开发之图形图像与动画(一)Paint和Canvas类学习
09-05
3. **透明度**：`setAlpha(int alpha)`方法用于设置画笔的透明度，其中0表示完全透明，255表示完全不透明。 4. **填充效果**：`setStyle(Paint.Style style)`方法可以设置填充模式，如`Paint.Style.FILL`用于填充...
canvas图谱pdf
08-19
* 透明度：使用 `globalAlpha` 属性设置透明度。 * 线宽：使用 `lineWidth` 属性设置线宽。 绘制文本 * 使用 `fillText()` 方法绘制文本，参数包括文本内容、坐标和字体样式。 * 使用 `strokeText()` 方法绘制文本...
几种绘制半透明多边形/绘制半透明矩形的方法
架构设计
08-09 838
1、GDI 步骤1）创建内存兼容DC HDC hBitmapDC = CreateCompatibleDC(hDC); HBITMAP hBitmap = CreateCompatibleBitmap(hDC, rt.Width(), rt.Height()); SelectObject(hBitmapDC,hBitmap); 步骤2）在内存DC中绘图 FillRgn(hB...
canvas 绘制半透明图片
ningcaicheng的专栏
01-02 1万+
var maskCanvas=document.createElement("canvas");       maskCanvas.style="pointer-events: none; z-index: 100000; position: absolute; left: 0px; top: 500px; width: 100px; height: 100px; background: rgb
html5 canvas 绘制矩形， 方法，线性渐变，径向渐变，透明等
csdn_chenli
07-25 1万+
canvas  绘制矩形， 方法，线性渐变，径向渐变，透明 1.    HTML5 canvas属性 1.1.     canvas画图 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。 1.1.1.      绘制矩形 html
canvas实现剪切蒙层
m0_37573249的博客
01-07 3857
canvas实现剪切蒙层。 在某些特殊业务场景下我们需要多图像进行裁剪，或者创建蒙层框选出某个特定的区域，要实现这样的场景其实思路有很多，但是考虑到canvas的性能、实现复杂度的问题来讲，都有各自的不足之处。首先来看如下图需求场景。
鼠标滚轮上下滑动忽上忽下怎么办? 鼠标滚轮乱跳的办法
weixin_44162814的博客
06-17 402
我的先用方法一，再用方法二就成功解决了。
原生js写数据自动纵向滚动，鼠标移入后停止滚动可手动滚动，鼠标移出转自动
最新发布
weixin_56381842的博客
06-20 138
原生js写数据自动纵向滚动，鼠标移入后停止滚动可手动滚动，鼠标移出转自动
树莓派pico入坑笔记，快捷键键盘制作
m0_74644005的博客
06-17 462
使用usb_hid功能制作快捷键小键盘，定义了6个键，分别是。boot启动程序代码，作用是防止被识别为usb存储设备。需要用到的库，记得复制进单片机存储里面。更多hid设备参考以下教程。然后是main主程序代码。
canvas 鼠标移动画矩形
09-06
您可以使用JavaScript和HTML5的Canvas元素来实现鼠标移动时绘制矩形的效果。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> // 获取Canvas元素和上下文对象 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 定义矩形的初始位置和尺寸 var rectX = 0; var rectY = 0; var rectWidth = 100; var rectHeight = 100; // 监听鼠标移动事件 canvas.addEventListener("mousemove", function(event) { // 获取鼠标相对于Canvas元素的位置 var mouseX = event.clientX - canvas.offsetLeft; var mouseY = event.clientY - canvas.offsetTop; // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制矩形 ctx.fillRect(rectX, rectY, rectWidth, rectHeight); // 更新矩形位置 rectX = mouseX - rectWidth / 2; rectY = mouseY - rectHeight / 2; }); </script> </body> </html> ``` 在这个示例中，我们首先获取了Canvas元素和上下文对象。然后定义了矩形的初始位置和尺寸。接着监听Canvas的鼠标移动事件，并在事件处理函数中获取鼠标的位置。然后清除画布，并重新绘制矩形，矩形的位置会根据鼠标的位置进行更新。 您可以将上述代码复制到一个HTML文件中，并在浏览器中打开该文件，即可看到鼠标移动时绘制矩形的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值