html5 画布效果,HTML5 Canvas 画布元素合成效果测试

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);

});