2.14_图像合成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像合成</title>
<style>
#canvas{
border:1px solid cornflowerblue;
position: absolute;
left:150px;
top: 10px;
background: #EEEEEE;
border: thin solid #aaa;
cursor: pointer;
box-shadow: rgba(200,200,255,0.9) 5px 5px 10px;
-webkit-box-shadow: rgba(200,200,255,0.9) 5px 5px 10px;
-moz-box-shadow: rgba(200,200,255,0.9) 5px 5px 10px;
}
</style>
</head>
<body>
<select id="compositingSelect" size="11">
<option value="source-atop">source-atop</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
<option value="source-over">source-over</option>
<option value="destination-atop">destination-atop</option>
<option value="destination-in">destination-in</option>
<option value="destination-out">destination-out</option>
<option value="destination-over">destination-over</option>
<option value="lighter">lighter</option>
<option value="copy">copy</option>
<option value="xor">xor</option>
</select>
<canvas id="canvas" width="700" height="420">您的浏览器不支持canvas</canvas>
</body>
<script>
var context = document.getElementById('canvas').getContext('2d');
var selectElement = document.getElementById('compositingSelect');
selectElement.selectedIndex = 3;
context.font = '128pt comic-sans';
drawRect()
function drawText(){
context.save();
context.shadowColor = 'rgba(100,100,150,0.8)';
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
context.fillStyle = 'cornflowerblue';
context.fillText('HTML5',20,250);
context.strokeText('HTML5',20,250);
context.restore();
}
function drawRect(){
context.save();
context.fillStyle = 'cornflowerblue';
context.rect(200,100,200,200);
context.fill();
context.restore();
}
function windowToCanvas(canvas,x,y){
var bbox = canvas.getBoundingClientRect();
return{
x:x-bbox.left*(canvas.width/bbox.width),
y:y-bbox.top*(canvas.height/canvas.height)
}
}
context.canvas.onmousemove = function(e){
var loc = windowToCanvas(context.canvas,e.clientX,e.clientY);
context.clearRect(0,0,context.canvas.width,context.canvas.height);
drawRect();
context.save();
context.globalCompositeOperation = selectElement.value;
context.beginPath();
context.arc(loc.x,loc.y,100,0,Math.PI*2,false);
context.fillStyle = 'orange';
context.fill();
context.restore();
}
</script>
</html>