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