<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>馬賽克</title>
<style>
*{
margin: 0;
padding: 0;
}
body, html {
height: 100%;
overflow: hidden;
}
#test {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: gray;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">
<span>您的浏覽器版本過低,請更換IE-9以上,或使用chrome等其他浏覽器</span>
</canvas>
<script type="text/javascript">
//1.擷取畫布
var canvas = document.querySelector('#test');
if (canvas.getContext) {
//2.擷取畫筆
var ctx = canvas.getContext('2d');
ctx.globalAlpha = 0.8;
ctx.fillStyle = 'red';
ctx.fillRect(50,50,100,100); //在此處作為destination
ctx.fillStyle = 'pink';
ctx.globalCompositeOperation = 'destination-in'
ctx.fillRect(100,100,100,100); //在此處作為source
}
</script>
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)