<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
The current browser does not support Canvas, can replace the browser a try!
</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
if(canvas.getContext('2d')){
var context = canvas.getContext('2d');
// 整个系统的透明度设置
context.globalAlpha = 0.7;
for(var i=0;i<100;i++){
var R = Math.floor(Math.random()*255);
var G = Math.floor(Math.random()*255);
var B = Math.floor(Math.random()*255);
context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
context.beginPath();
context.arc(Math.random()*canvas.width,Math.random()*canvas.height,Math.random()*100,0,2*Math.PI)
context.closePath();
context.fill();
}
}else{
alert('当前游览器不支持Canvas，请更换游览器后再试！');
}
}
</script>
</body>
<script>
/*global
globalAlpha
globalCompositeOperation = "source-over"(default)
sourse-atop
sourse-in
sourse-out
destination-over //前面绘制的覆盖了后面绘制的图形
destination-atop
destination-in
destination-out
lighter
copy
xor
*/
</script>
</html>
