View Code

1 function draw10(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { ; 5 } 6 var context = canvas.getContext("2d"); 7 var oprtns = new Array( 8 "source-over", 9 "destination-over", 10 "source-in", 11 "destination-in", 12 "source-out", 13 "destination-out", 14 "source-atop", 15 "destination-atop", 16 "lighter", 17 "xor", 18 "copy" 19 ); interal = setInterval(function () { 24 if (i == 10) { 25 i=0; 26 } 27 else { 28 i++; 29 } context.fillStyle = "blue"; 32 context.fillRect(10, 10, 60, 60); context.globalCompositeOperation = oprtns[i]; context.beginPath(); 37 context.fillStyle = "red"; 38 context.arc(60, 60, 30, 0, Math.PI * 2, false); 39 context.fill(); 40 }, 1000); 41 42 }

 结果是动态的切换各种组合

给图形绘制阴影

    context.shadowOffsetX :阴影的横向位移量（默认值为0）
    context.shadowOffsetY :阴影的纵向位移量（默认值为0）
    context.shadowColor :阴影的颜色
    context.shadowBlur :阴影的模糊范围（值越大越模糊）

先来个简单的例子

View Code

1 function draw27(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) ; 5 var context = canvas.getContext('2d'); 6 context.shadowOffsetX = 10; 7 context.shadowOffsetY = 10; 8 context.shadowColor = 'rgba(100,100,100,0.5)'; 9 context.shadowBlur = 1.5; 10 context.fillStyle = 'rgba(255,0,0,0.5)'; 11 context.fillRect(100, 100, 200, 100); 12 }

 再来个书本上的五角星的例子