玩转html5canvas画图(7)

时间：2018-11-26

内容来自dedecms

1 function draw10(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 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 ); 20 var i = 0;//组合效果编号 21 22 //结合setinterval动态显示组合 23 var interal = setInterval(function () { 24 if (i == 10) { 25 i=0; 26 } 27 else { 28 i++; 29 } 30 //蓝色矩形 31 context.fillStyle = "blue"; 32 context.fillRect(10, 10, 60, 60); 33 //设置组合方式 34 context.globalCompositeOperation = oprtns[i]; 35 //设置新图形（红色圆形） 36 context.beginPath(); 37 context.fillStyle = "red"; 38 context.arc(60, 60, 30, 0, Math.PI * 2, false); 39 context.fill(); 40 }, 1000); 41 42 } copyright dedecms

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

dedecms.com

织梦好，好织梦

给图形绘制阴影
织梦内容管理系统

上一篇：傲剑狂刀出招表（键盘出招表+秘籍） 下一篇：写作文必学的六大修辞手法详解