資訊專(zhuān)欄INFORMATION COLUMN
摘要：主要實(shí)現(xiàn)功能在畫(huà)布上跟隨鼠標(biāo)的按鍵移動(dòng)畫(huà)出拖拉范圍內(nèi)的矩形彈出選擇項(xiàng)，選對(duì)勾則將這部分矩形填上背景色，選叉號(hào)則取消本次拖拉的矩形。附業(yè)務(wù)目的視頻遮罩是一種將視頻某部分區(qū)域遮蓋的效果，可用于遮蓋電視臺(tái)圖標(biāo)，廣告，鏡頭內(nèi)敏感部分等。
作者：云荒杯傾
序本意是用這個(gè)做視頻遮罩效果，但是還是從更通用的角度來(lái)解釋事情本身吧。
少摻雜一點(diǎn)業(yè)務(wù)目的。
在canvas畫(huà)布上跟隨鼠標(biāo)的按鍵、移動(dòng)畫(huà)出拖拉范圍內(nèi)的矩形；
彈出選擇項(xiàng)，選“對(duì)勾”則將這部分矩形填上背景色，選“叉號(hào)”則取消本次拖拉的矩形。
代碼不長(zhǎng)，直接放。
引用部分樣式部分
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){//確保按下才發(fā)生
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效果查看
注： 每畫(huà)完或者拖拉出一個(gè)矩形后，canvas不再響應(yīng)事件，所以需要reload頁(yè)面進(jìn)行再次畫(huà)矩形。
你也可以修改代碼為拖拉出一個(gè)矩形后不禁止canvas上的事件。這樣就可以一直畫(huà)。
http://htmlpreview.github.io/...://github.com/cunzaizhuyi/canvasDemo/blob/master/src/mask.html
源代碼地址https://github.com/cunzaizhuy...
目錄下找mask.html文件，就是本文程序。
其他幾個(gè)程序也都是基于canvas的小程序。
附：業(yè)務(wù)目的：
視頻遮罩是一種將視頻某部分區(qū)域遮蓋的效果，可用于遮蓋電視臺(tái)圖標(biāo)，廣告，鏡頭內(nèi)敏感部分等。
前端實(shí)現(xiàn)可以在播放器上添加一層canvas來(lái)繪制。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89994.html
摘要：萬(wàn)圣節(jié)到了，寫(xiě)一個(gè)小例子了解一下畫(huà)圖方法，可以實(shí)現(xiàn)一些有趣的效果，動(dòng)畫(huà)實(shí)現(xiàn)。移動(dòng)路徑方法把路徑移動(dòng)到畫(huà)布中指定點(diǎn)，不創(chuàng)建線條。實(shí)現(xiàn)初始畫(huà)布顯示文字萬(wàn)圣節(jié)快樂(lè)閃電打雷反轉(zhuǎn)畫(huà)布重置畫(huà)布總結(jié)萬(wàn)圣節(jié)快樂(lè) 萬(wàn)圣節(jié)到了，寫(xiě)一個(gè)小例子了解一下canvas畫(huà)圖方法，canvas可以實(shí)現(xiàn)一些有趣的效果，動(dòng)畫(huà)實(shí)現(xiàn)。以一個(gè)簡(jiǎn)單的頁(yè)面實(shí)現(xiàn)了解一下基礎(chǔ)的畫(huà)圖方法。原文鏈接 canvas可以實(shí)現(xiàn)一些有趣的效果，動(dòng)...
摘要：二次以及三次貝塞爾曲線都十分有用，一般用來(lái)繪制復(fù)雜有規(guī)律的圖形。繪制三次貝塞爾曲線，為結(jié)束點(diǎn)，為控制點(diǎn)一，為控制點(diǎn)二。下邊的圖能夠很好的描述兩者的關(guān)系，二次貝塞爾曲線有一個(gè)開(kāi)始結(jié)束點(diǎn)藍(lán)色以及一個(gè)控制點(diǎn)紅色，而三次貝塞爾曲線使用兩個(gè)控制點(diǎn)。 元素 看起來(lái)和 元素很相像，唯一的不同就是它并沒(méi)有 src 和 alt 屬性。實(shí)際上， 標(biāo)簽只有兩個(gè)屬性—— width和height。當(dāng)沒(méi)有...
摘要：二次以及三次貝塞爾曲線都十分有用，一般用來(lái)繪制復(fù)雜有規(guī)律的圖形。繪制三次貝塞爾曲線，為結(jié)束點(diǎn)，為控制點(diǎn)一，為控制點(diǎn)二。下邊的圖能夠很好的描述兩者的關(guān)系，二次貝塞爾曲線有一個(gè)開(kāi)始結(jié)束點(diǎn)藍(lán)色以及一個(gè)控制點(diǎn)紅色，而三次貝塞爾曲線使用兩個(gè)控制點(diǎn)。 元素 看起來(lái)和 元素很相像，唯一的不同就是它并沒(méi)有 src 和 alt 屬性。實(shí)際上， 標(biāo)簽只有兩個(gè)屬性—— width和height。當(dāng)沒(méi)有...
閱讀 3433·2021-11-10 11:36
閱讀 3324·2021-10-08 10:21
閱讀 2939·2021-09-29 09:35
閱讀 2503·2021-09-22 16:06
閱讀 4097·2021-09-09 09:33
閱讀 1388·2019-08-30 15:44
閱讀 3234·2019-08-30 10:59
閱讀 3063·2019-08-29 15:32
