canvas上下文物件的globalcompositeoperation屬性：
刮刮卡功能主要是使用這個值的設定來實現的，之前介紹過globalcompositeoperation屬性共有11種值，詳細介紹可以訪問html 5 canvas 參考手冊
這裡簡單的對11種值做一下截圖：
他這裡寫的源物件可以理解為後加上去的圖形，就是在原有圖形上後新增的圖形。
刮刮卡功能的實現就是使用ctx.globalcompositeoperation = 『destination-out』;來實現的。
lang="en">
documenttitle>
canvas
style>
head>
id="canvas">
canvas>
var canvas = document.getelementbyid('canvas');
var ctx = canvas.getcontext('2d');
ctx.beginpath();
ctx.fillstyle = "#999";
ctx.fillrect(0,0,500,500);
ctx.fill();
canvas.onmousedown = function
() canvas.onmouseup = function
() }
}script>
body>
html>
canvas實現刮刮卡效果
目前在html5和css3的熱潮下，html頁面的效果也是層出不窮，下面我們來介紹使用canvas來模仿刮獎刮開效果。原理在需要刮出的或者文字上方蓋上一層灰色或者其他背景的canvas畫布，當手指或者滑鼠點選畫布並移動時，將畫布上移動過的軌跡變成透明即可。分析demo中在class為content的...
canvas 繪製刮刮卡
思路 用div來展示刮獎結果，用canvas繪製刮獎前展示的或者文字 將canvas疊在div上方，刮獎是只需要操作canvas配合touch事件即可簡單完成。canvas刮獎可以用globalcompositeoperation屬性製作。globalcompositeoperation 屬性值描述...
html5 canvas製作刮刮卡
下班後，閒著無事，剛好近期在學習畫布相關知識，就寫了個刮刮卡的demo練一下手，相容安卓 ios哦。高手路過，多多指點！刮刮卡實現原理 通過canvas繪製乙個，使用者手指觸發螢幕時，刮開當前一部分封面圖，從而顯示正文中的內容。整體運用canvas的globalcompositeoperation屬...