柠檬铺

HTML5的绝活:巧用Canvas制作会动的时钟（二）

—

由

柠檬铺
于

组合

　[javascript] view plaincopy

　　

$(

　　function() {

　　var canvas = document.getElementById("mycanvas");

　　canvas.height = 100;

　　canvas.width = 100;

　　var context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　//默认 新图形会覆盖在原有内容之上

　　context.globalCompositeOperation = "source-over";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　$(canvas).toggle(

　　function() {

　　canvas.width = 100;

　　// 原有内容之下绘制新图形

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "destination-over";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "source-in";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的destination-in

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "destination-in";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//只有新图形中与原有内容不重叠的部分会被绘制出来source-out

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "source-out";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//原有内容中与新图形不重叠的部分会被保留

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "destination-out";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "source-atop";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "destination-atop";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//两图形中重叠部分作加色处理

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "lighter";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//两图形中重叠的部分作减色处理darker

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "darker";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//重叠的部分会变成透明

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "xor";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　},

　　function() {

　　canvas.width = 100;

　　//只有新图形会被保留，其它都被清除掉

　　context.clearRect(0, 0, 500, 500);

　　context.beginPath();

　　context = canvas.getContext("2d");

　　context.fillStyle = "#AABBCC";

　　context.fillRect(10, 10, 50, 50);

　　context.globalCompositeOperation = "copy";

　　context.fillStyle = "blue";

　　context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.fill();

　　$("span").html(context.globalCompositeOperation);

　　alert("演示结束");

　　}

　　);

　　}

　　);