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

已于 2024-03-26 16:14:57 修改
阅读量511 收藏 5
点赞数 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~~
关注
专栏目录
Canvas画矩形之三种方法
mmrsdym的专栏
10-31 5739
实现效果图如下：
canvas笔记-使用canvas画矩形及各样式（透明）
IT1995的博客
05-31 4846
程序运行截图如下： 源码如下： <!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实现鼠标绘制矩形框
07-30
基于canvas的鼠标绘制矩形框的demo，多个canvas对象下支持选中，平移，删除操作，代码用VUE实现的
android 画布区域,android:canvas绘制一个透明矩形并填充其余区域
weixin_39715187的博客
05-25 953
我为那些需要它的人共享一个代码,用于为相机绘制SurfaceView的代码,由透明背景上的透明矩形和可选的alpha组成。欢迎大家有更好的贡献:)@Overrideprotected void onDraw(Canvas canvas) {mAGPLog.e(this.getClass().getName() + " - onDraw");canvas.drawColor(Color.argb(1...
canvas实现鼠标长按绘制多个选择框
weixin_52365350的博客
04-07 1417
1.引入h5.player.js
鼠标画框矩形裁剪图片工具含源码及工程文件）
12-04
自己用c#写的鼠标画框矩形裁剪图片工具，含源码及工程文件，可编译运行，在win7的64为系统下做过测试，亲测可用，其他的系统版本未试过。
canvas学习笔记-透明度
最新发布
m0_51181022的博客
05-17 1597
在上面画一系列半径递增的半透明圆。圆叠加得越多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，从中心到边缘部分，背景图会呈现逐渐消失的效果。方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。里所有图形的透明度，有效的值范围是0.0（完全透明）到1.0（完全不透明），默认值是1.0。第二个例子和上面的那个类似，不过不是画圆，而是画矩形。可以分别设置轮廓和填充样式，因而具有更好的可操作性和使用灵活性。
QML--Canvas画布实现矩形圆形等圈定
01-10
在QML中，你可以通过JavaScript对象和方法来控制画笔的颜色、线宽、透明度等属性，实现丰富的视觉效果。 要实现矩形的绘制，可以使用`fillRect()`或`strokeRect()`方法。例如： ```qml Canvas { id: ...
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
10-16
本文通过一个具体的示例，详细介绍了如何使用AngularJS框架来实现一个可以通过鼠标拖动的矩形框，并且特别强调了此实现方法兼容IE8浏览器。以下是实现该功能涉及的关键知识点和技巧。 ### 1. AngularJS事件绑定和...
canvas-draw-panel-master.zip_html5_画矩形
09-24
// 参数：x轴起点坐标，y轴起点坐标，矩形宽度，矩形高度，边框宽度，边框颜色，填充颜色 ctx.strokeRect(x, y, width, height, borderWidth, borderColor, fillColor); ``` 在"canvas-draw-panel-master"项目中，...
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...
【js学习笔记-114】----<canvas>矩形、颜色、透明度、渐变及图案
热门推荐
Will 的专栏
04-02 1万+
矩形、颜色、透明度、渐变及图案（感觉没怎么懂！！先放这吧，回产头再研究） 矩形 CanvasRenderingContext2D对象定义了4个用于绘制矩形的方法 都接受两个参数，其中一个指定矩形的一个顶点，另一个参数指定矩形的宽高 n  fillRect() 使用fillStyle来填充指定矩形。 n  strokeRect() strokeStyle和其它线段的属性来勾勒指定的矩形
uni-app 利用canvas进行画框，移动框，放大缩小并删除，目前支持小程序,h5，其他没测试过
xiaoyou_xiaohe的博客
06-01 2312
目前没有在小程序上自主画框的，参考了网上资源，但是小程序跟原生的vue写法还是有差别，攻克了很多难题，这里分享给大家
js摄像头
dashan_1200的博客
08-01 103
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>GetUserMedia实例</title> </head> <body> <!...
HTML5Canvas实现简易画图工具（铅笔，直线，矩形，圆，文本框，橡皮擦等）
m0_60014407的博客
08-03 2463
初学Canvas，用canvas做了简单的画图工具体会并熟悉了一下大致的实现方案。
学习Canvas基础-绘制矩形
qq_67983277的博客
11-15 4954
学习Canvas基础-绘制矩形
canvas高级动画001：文字瀑布流
大剑师兰特的GIS世界
11-25 440
我们经常会看到一些科技场景，01数字不断交替下移或者扩散闪现等。这里是一个示例，通过setInterval的方式，来不断的绘制文字，形成瀑布流的状态。
【学习笔记】H5-canvas
m0_54970415的博客
05-30 455
文章目录一、canvas标签使用方法二、准备画笔三、能画什么？1. 矩形a.实心矩形b.空心矩形c.透明矩形（异形矩形、清空）2. 路径 (万能方法，可以画任意的形状)<1> 直线<2> 三角形<3> 路径矩形<4> 圆或圆弧四、描边、填充、边框粗细等（上色）1. 填充颜色2. 描边颜色3. 边框粗细4. 描边(只对路径有用)5. 填充(只对路径有用) 一、canvas标签使用方法 canvas是一个双标签，默认width300，height150。设置画布大
使用canvas画布实现矩形的绘制（保留上一个绘制的矩形）
Billow_lamb的博客
06-17 1155
/ 每次绘制会清空画布。
canvas 画矩形
07-28
总结起来，Canvas提供了三种方法来绘制矩形：fillRect()用于绘制填充的矩形，strokeRect()用于绘制矩形的边框，clearRect()用于清除指定矩形区域。可以根据需要选择合适的方法来绘制矩形。\[1\] #### 引用[....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值