canvas实现矩形画图效果

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas实现矩形画图效果相关的知识,希望对你有一定的参考价值。

作者:云荒杯倾

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

主要实现功能

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







以上是关于canvas实现矩形画图效果的主要内容,如果未能解决你的问题,请参考以下文章

canvas实现简单的画图工具中画笔效果

WPF 实现拖动工具箱效果

jscanvas画图放大是文字不变

canvas画板绘图 矩形 圆形 椭圆 自定义多边形 画笔/铅笔 曲线 橡皮擦

delphi canvas如何根据中心点坐标 和矩形的宽度 动态的画出矩形?

Javascript如何在网页上实现画图功能