HTML5 Canvas 全局复合操作语法
context.globalCompositeOperation = 'destination-over';
HTML5 Canvas 全局复合操作
我们可以通过使用画布上下文的 globalCompositeOperation 属性在 HTML5 Canvas 中执行复合操作。 globalCompositeOperation 定义了画布的源状态和目标状态之间的复合操作。 destination 表示复合操作之前的画布状态，source 表示画布状态复合操作。
HTML5 Canvas 全局复合操作示例
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myownCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("myownCanvas");
var context = canvas.getContext("2d");
var tempCanvas = document.getElementById("tempCanvas");
var tempContext = tempCanvas.getContext("2d");
var squareWidth = 55;
var circleRadius = 35;
var startX = 10;
var startY = 30;
var rectCircleDistX = 50;
var rectCircleDistY = 50;
var exampleDistX = 150;
var exampleDistY = 140;
var arr = new Array();
arr.push("source stop");
arr.push("source in");
arr.push("source out");
arr.push("source over");
arr.push("destination stop");
arr.push("destination in");
arr.push("destination out");
arr.push("destination-over");
arr.push("lighter");
arr.push("darker");
arr.push("xor");
arr.push("copy");
//draw each of the ten operations
for (var i = 0; i < arr.length; i++) {
var thisX;
var thisY;
var thisOperation = arr[i];
//first row
if (i < 4) {
thisX = startX + (i * exampleDistX);
thisY = startY;
}
//second row
else if (i < 8) {
thisX = startX + ((i - 4) * exampleDistX);
thisY = startY + exampleDistY;
}
//third row
else {
thisX = startX + ((i - 8) * exampleDistX);
thisY = startY + (exampleDistY * 2);
}
tempContext.clearRect(0, 0, canvas.width, canvas.height);
//draw rectangle
tempContext.beginPath();
tempContext.rect(thisX, thisY, squareWidth, squareWidth);
tempContext.fillStyle = "yellow";
tempContext.fill();
//set global composite
tempContext.globalCompositeOperation = thisOperation;
//draw circle
tempContext.beginPath();
tempContext.arc(thisX + rectCircleDistX, thisY + rectCircleDistY, circleRadius, 0, 2 * Math.PI, false);
tempContext.fillStyle = "Gray";
tempContext.fill();
//set back to default
tempContext.globalCompositeOperation = "source-over";
tempContext.font = "10pt Verdana";
tempContext.fillStyle = "black";
tempContext.fillText(thisOperation, thisX, thisY + squareWidth + 45);
//copy drawing from tempCanvas onto myCanvas
context.drawImage(tempCanvas, 0, 0);
}
}
</script>
</head>
<body>
<canvas id="myownCanvas" width="578" height="430"></canvas>
<canvas id="tempCanvas" width="578" height="430" style="display:none;"></canvas>
</body>
</html>
日期：2020-04-11 23:04:09 来源：oir作者：oir