canvas实现矩形画图效果

Posted 2020-12-08 jlfw

作者：云荒杯倾

序

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

主要实现功能

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

代码块

代码不长，直接放。

引用部分

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

样式部分

 <style>
        canvas{
            width:700px;
            height:700px;
            border:1px solid blue;
        }
        #mask{
            width:65px;
            height:30px;
            position: absolute;
            border:1px solid green;
        }
        .fa-check{
            color:green
        }
        .fa-times{
            color:red;
        }
    </style>

html部分

 <canvas id="canvas"></canvas>
    <div id="mask">
        <span id="no"><i class="fa fa-2x fa-times"></i></span>
        <span id="yes"><i class="fa fa-2x fa-check"></i></span>
    </div>

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来绘制。