canvas實現矩形畫圖效果

TalkingData 發布于2019-08-21 17:46 / 1671人閱讀

摘要：主要實現功能在畫布上跟隨鼠標的按鍵移動畫出拖拉范圍內的矩形彈出選擇項，選對勾則將這部分矩形填上背景色，選叉號則取消本次拖拉的矩形。附業務目的視頻遮罩是一種將視頻某部分區域遮蓋的效果，可用于遮蓋電視臺圖標，廣告，鏡頭內敏感部分等。

作者：云荒杯傾

序

本意是用這個做視頻遮罩效果，但是還是從更通用的角度來解釋事情本身吧。
少摻雜一點業務目的。

主要實現功能

在canvas畫布上跟隨鼠標的按鍵、移動畫出拖拉范圍內的矩形；
彈出選擇項，選“對勾”則將這部分矩形填上背景色，選“叉號”則取消本次拖拉的矩形。

代碼塊

代碼不長，直接放。

引用部分

樣式部分

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

源代碼地址

https://github.com/cunzaizhuy...
目錄下找mask.html文件，就是本文程序。

其他幾個程序也都是基于canvas的小程序。

附：

業務目的：
視頻遮罩是一種將視頻某部分區域遮蓋的效果，可用于遮蓋電視臺圖標，廣告，鏡頭內敏感部分等。
前端實現可以在播放器上添加一層canvas來繪制。

GPU云服務器云服務器使用canvas畫圖這種效果怎么實現實現放大鏡效果 java實現濾鏡效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89994.html

萬圣節動畫-canvas像素點

摘要：萬圣節到了，寫一個小例子了解一下畫圖方法，可以實現一些有趣的效果，動畫實現。移動路徑方法把路徑移動到畫布中指定點，不創建線條。實現初始畫布顯示文字萬圣節快樂閃電打雷反轉畫布重置畫布總結萬圣節快樂萬圣節到了，寫一個小例子了解一下canvas畫圖方法，canvas可以實現一些有趣的效果，動畫實現。以一個簡單的頁面實現了解一下基礎的畫圖方法。原文鏈接 canvas可以實現一些有趣的效果，動...

tainzhi 2019-08-22 11:14 評論0 收藏0
小白上學のcanvas零基礎

摘要：二次以及三次貝塞爾曲線都十分有用，一般用來繪制復雜有規律的圖形。繪制三次貝塞爾曲線，為結束點，為控制點一，為控制點二。下邊的圖能夠很好的描述兩者的關系，二次貝塞爾曲線有一個開始結束點藍色以及一個控制點紅色，而三次貝塞爾曲線使用兩個控制點。元素看起來和元素很相像，唯一的不同就是它并沒有 src 和 alt 屬性。實際上，標簽只有兩個屬性—— width和height。當沒有...

zhaot 2019-08-29 11:05 評論0 收藏0
小白上學のcanvas零基礎

摘要：二次以及三次貝塞爾曲線都十分有用，一般用來繪制復雜有規律的圖形。繪制三次貝塞爾曲線，為結束點，為控制點一，為控制點二。下邊的圖能夠很好的描述兩者的關系，二次貝塞爾曲線有一個開始結束點藍色以及一個控制點紅色，而三次貝塞爾曲線使用兩個控制點。元素看起來和元素很相像，唯一的不同就是它并沒有 src 和 alt 屬性。實際上，標簽只有兩個屬性—— width和height。當沒有...

Profeel 2019-08-22 11:01 評論0 收藏0