createjs 繪制圓形圖片

由於之前做移動端h5 打印圖片都是用 html2canvas ,但是遇到比較多坑所以想轉換用createjs直接繪制。

在createjs里，想實現比較基礎的圓形圖片，簡單來說就是把圖片放在一個圓形范圍里面，超出圓形部分隱藏。

用到的屬性:  mask 

效果圖：

 代碼片段：

//創建圖形
        var bitmap1 = new createjs.Bitmap(queue.getResult('pic1'));
        //可進行圖片位移
        bitmap1.x = -80;
        bitmap1.y = -80;
        //創建圓形
        var circle = new createjs.Shape();
        circle.graphics.beginFill().drawCircle(100, 100, 100); 
        stage.addChild(bitmap1);
        stage.addChild(circle);
        //進行遮罩處理
        bitmap1.mask = circle;

 

源代碼地址：

https://github.com/Zion0707/canvas_practice/blob/master/createjs/js/02.js