JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
/* 本例演示画布(canvas)元素合成效果,主要使用2中方法:
透明属性globalAlpha和组合属性globalCompositeOperation */
$(document).ready(function() {
var canvas1 = $("#canvas1");
var context1 = canvas1.get(0).getContext("2d");
context1.fillStyle = "rgb(63, 169, 245)";
context1.fillRect(50, 50, 100, 100);
context1.globalAlpha = 0.5;
context1.fillStyle = "rgb(255, 123, 172)";
context1.fillRect(100, 100, 100, 100);
var canvas2 = $("#canvas2");
var context2 = canvas2.get(0).getContext("2d");
context2.fillStyle = "rgb(63, 169, 245)";
context2.fillRect(50, 50, 100, 100);
context2.globalCompositeOperation = "source-over";
context2.fillStyle = "rgb(255, 123, 172)";
context2.fillRect(100, 100, 100, 100);
var canvas3 = $("#canvas3");
var context3 = canvas3.get(0).getContext("2d");
context3.fillStyle = "rgb(63, 169, 245)";
context3.fillRect(50, 50, 100, 100);
context3.globalCompositeOperation = "destination-over";
context3.fillStyle = "rgb(255, 123, 172)";
context3.fillRect(100, 100, 100, 100);
var canvas4 = $("#canvas4");
var context4 = canvas4.get(0).getContext("2d");
context4.fillStyle = "rgb(63, 169, 245)";
context4.fillRect(50, 50, 100, 100);
context4.globalCompositeOperation = "source-atop";
context4.fillStyle = "rgb(255, 123, 172)";
context4.fillRect(100, 100, 100, 100);
var canvas5 = $("#canvas5");
var context5 = canvas5.get(0).getContext("2d");
context5.fillStyle = "rgb(63, 169, 245)";
context5.fillRect(50, 50, 100, 100);
context5.globalCompositeOperation = "destination-atop";
context5.fillStyle = "rgb(255, 123, 172)";
context5.fillRect(100, 100, 100, 100);
var canvas6 = $("#canvas6");
var context6 = canvas6.get(0).getContext("2d");
context6.fillStyle = "rgb(63, 169, 245)";
context6.fillRect(50, 50, 100, 100);
context6.globalCompositeOperation = "source-in";
context6.fillStyle = "rgb(255, 123, 172)";
context6.fillRect(100, 100, 100, 100);
var canvas7 = $("#canvas7");
var context7 = canvas7.get(0).getContext("2d");
context7.fillStyle = "rgb(63, 169, 245)";
context7.fillRect(50, 50, 100, 100);
context7.globalCompositeOperation = "destination-in";
context7.fillStyle = "rgb(255, 123, 172)";
context7.fillRect(100, 100, 100, 100);
var canvas8 = $("#canvas8");
var context8 = canvas8.get(0).getContext("2d");
context8.fillStyle = "rgb(63, 169, 245)";
context8.fillRect(50, 50, 100, 100);
context8.globalCompositeOperation = "source-out";
context8.fillStyle = "rgb(255, 123, 172)";
context8.fillRect(100, 100, 100, 100);
var canvas9 = $("#canvas9");
var context9 = canvas9.get(0).getContext("2d");
context9.fillStyle = "rgb(63, 169, 245)";
context9.fillRect(50, 50, 100, 100);
context9.globalCompositeOperation = "destination-out";
context9.fillStyle = "rgb(255, 123, 172)";
context9.fillRect(100, 100, 100, 100);
var canvas10 = $("#canvas10");
var context10 = canvas10.get(0).getContext("2d");
context10.fillStyle = "rgb(63, 169, 245)";
context10.fillRect(50, 50, 100, 100);
context10.globalCompositeOperation = "lighter";
context10.fillStyle = "rgb(255, 123, 172)";
context10.fillRect(100, 100, 100, 100);
var canvas11 = $("#canvas11");
var context11 = canvas11.get(0).getContext("2d");
context11.fillStyle = "rgb(63, 169, 245)";
context11.fillRect(50, 50, 100, 100);
context11.globalCompositeOperation = "copy";
context11.fillStyle = "rgb(255, 123, 172)";
context11.fillRect(100, 100, 100, 100);
var canvas12 = $("#canvas12");
var context12 = canvas12.get(0).getContext("2d");
context12.fillStyle = "rgb(63, 169, 245)";
context12.fillRect(50, 50, 100, 100);
context12.globalCompositeOperation = "xor";
context12.fillStyle = "rgb(255, 123, 172)";
context12.fillRect(100, 100, 100, 100);
});