canvas实现矩形画图效果

TalkingData 发布于2019-08-21 17:46 / 1746人阅读

摘要：主要实现功能在画布上跟随鼠标的按键移动画出拖拉范围内的矩形弹出选择项，选对勾则将这部分矩形填上背景色，选叉号则取消本次拖拉的矩形。附业务目的视频遮罩是一种将视频某部分区域遮盖的效果，可用于遮盖电视台图标，广告，镜头内敏感部分等。

作者：云荒杯倾

序

本意是用这个做视频遮罩效果，但是还是从更通用的角度来解释事情本身吧。
少掺杂一点业务目的。

主要实现功能

在canvas画布上跟随鼠标的按键、移动画出拖拉范围内的矩形；
弹出选择项，选“对勾”则将这部分矩形填上背景色，选“叉号”则取消本次拖拉的矩形。

代码块

代码不长，直接放。

引用部分

</>复制代码

样式部分

</>复制代码

HTML部分

</>复制代码

js部分

</>复制代码 
let canvas = $("#canvas").get(0);
        let ctx = canvas.getContext("2d");
        canvas.width = 700;
        canvas.height = 700;
        ctx.strokeStyle = "red";
        ctx.fillStyle = "green";
        $("#mask").hide();
        let origin = [0, 0];
        let width2height = [0, 0];
        $("#canvas").on("mousedown", mousedownHandler)
       .on("mousemove", mousemoveHandler)
       .on("mouseup", mouseupHandler);
        function mousedownHandler(e){
            origin = [e.offsetX, e.offsetY];
        }
        function mousemoveHandler(e) {
            if(origin[0] !==0 || origin[1] !== 0){//确保按下才发生
                width2height = [e.offsetX - origin[0] , e.offsetY - origin[1]];
                ctx.clearRect(0, 0, 700, 700);
                ctx.strokeRect(origin[0], origin[1], width2height[0], width2height[1]);
            }
        }
        function mouseupHandler(e) {
            $("#mask").show().css("top", e.clientY).css("left", e.clientX);
            diableCanvasEvent();
        }
        function diableCanvasEvent() {
            $("#canvas").off("mousedown", mousedownHandler)
                .off("mousemove", mousemoveHandler)
                .off("mouseup", mouseupHandler);
        }
        $("#yes").click(function () {
            ctx.globalAlpha = 0.2;
            ctx.fillRect(origin[0], origin[1], width2height[0], width2height[1]);
            $("#mask").hide();
            origin = [0, 0];
        });
        $("#no").click(function () {
            $("#mask").hide();
            ctx.clearRect(0, 0, 700, 700);
            origin = [0, 0];
        });

demo效果查看

注：每画完或者拖拉出一个矩形后，canvas不再响应事件，所以需要reload页面进行再次画矩形。
你也可以修改代码为拖拉出一个矩形后不禁止canvas上的事件。这样就可以一直画。

http://htmlpreview.github.io/...://github.com/cunzaizhuyi/canvasDemo/blob/master/src/mask.html

源代码地址

https://github.com/cunzaizhuy...
目录下找mask.html文件，就是本文程序。

其他几个程序也都是基于canvas的小程序。

附：

业务目的：
视频遮罩是一种将视频某部分区域遮盖的效果，可用于遮盖电视台图标，广告，镜头内敏感部分等。
前端实现可以在播放器上添加一层canvas来绘制。

GPU云服务器云服务器使用canvas画图这种效果怎么实现实现放大镜效果 java实现滤镜效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89994.html

万圣节动画-canvas像素点

摘要：万圣节到了，写一个小例子了解一下画图方法，可以实现一些有趣的效果，动画实现。移动路径方法把路径移动到画布中指定点，不创建线条。实现初始画布显示文字万圣节快乐闪电打雷反转画布重置画布总结万圣节快乐万圣节到了，写一个小例子了解一下canvas画图方法，canvas可以实现一些有趣的效果，动画实现。以一个简单的页面实现了解一下基础的画图方法。原文链接 canvas可以实现一些有趣的效果，动...

tainzhi 2019-08-22 11:14 评论0 收藏0
小白上学のcanvas零基础

摘要：二次以及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。绘制三次贝塞尔曲线，为结束点，为控制点一，为控制点二。下边的图能够很好的描述两者的关系，二次贝塞尔曲线有一个开始结束点蓝色以及一个控制点红色，而三次贝塞尔曲线使用两个控制点。元素看起来和元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，标签只有两个属性—— width和height。当没有...

zhaot 2019-08-29 11:05 评论0 收藏0
小白上学のcanvas零基础

摘要：二次以及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。绘制三次贝塞尔曲线，为结束点，为控制点一，为控制点二。下边的图能够很好的描述两者的关系，二次贝塞尔曲线有一个开始结束点蓝色以及一个控制点红色，而三次贝塞尔曲线使用两个控制点。元素看起来和元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，标签只有两个属性—— width和height。当没有...

Profeel 2019-08-22 11:01 评论0 收藏0