java canvas画矩形_canvas实现矩形画图效果

作者：云荒杯倾

序

本意是用这个做视频遮罩效果，但是还是从更通用的角度来解释事情本身吧。

少掺杂一点业务目的。

主要实现功能

在canvas画布上跟随鼠标的按键、移动画出拖拉范围内的矩形；

弹出选择项，选“对勾”则将这部分矩形填上背景色，选“叉号”则取消本次拖拉的矩形。

代码块

代码不长，直接放。

引用部分

样式部分

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;

}

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

源代码地址

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

附：

业务目的：

视频遮罩是一种将视频某部分区域遮盖的效果，可用于遮盖电视台图标，广告，镜头内敏感部分等。

前端实现可以在播放器上添加一层canvas来绘制。