globalCompositeOperation有很多的值，一共十一个;
这些值叫Porter-Duff操作符
代码如下
由此原理可以制作出非常炫酷有意思的效果，可以发散思维自己尝试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding: 0;margin: 0}
a{text-decoration: none}
ul,ol{list-style: none}
img{border: none}
br{clear: both;font-size: 0;line-height: 0}
canvas{border: 1px solid red}
body{text-align: center}
</style>
</head>
<body>
<div id="selectBox">
<select name="" 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>
</div>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/polygon.js"></script>
<script>
var context=document.getElementById("canvas").getContext("2d");
var selectElement=document.getElementById("compositingSelect");
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.restore()
}
function windowToCanvas(canvas,x,y){
var bbox=canvas.getBoundingClientRect()
return {
x:x-bbox.x,
y:y-bbox.y
}
}
context.canvas.onmousemove=function(e){
var loc=windowToCanvas(context.canvas,e.clientX,e.clientY)
context.clearRect(0,0,context.canvas.width,context.canvas.height)
drawText()
context.save()
context.globalCompositeOperation=selectElement.value;
context.beginPath()
context.arc(loc.x,loc.y,100,0,Math.PI*2,false)
context.fillStyle="orange";
context.stroke()
context.fill()
context.restore()
}
selectElement.selectedIndex=3;
context.lineWidth=0.5
context.font="128pt Comic-sans"
drawText()
网友评论