<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="600" height="600"> yourbrowser does not support the canvas tag </canvas> <script> // 1.矩形 // var canvas = document.getElementById('myCanvas'); //先获取id // var ctx = canvas.getContext('2d'); // ctx.fillStyle='#FF0000'; // ctx.fillRect(0,0,80,100); // 2.圆形 // var canvas=document.getElementById("myCanvas"); // var context=canvas.getContext("2d"); // context.beginPath(); // context.arc(200,150,50,0,Math.PI*2,true); // context.closePath(); // context.fillStyle="rgba(255,0,0,0.25)"; // context.fill(); // 3.渐变 //function draw25(id) { // var canvas = document.getElementById(id); // if (canvas == null) // return false; // var context = canvas.getContext('2d'); // var g1 = context.createLinearGradient(0, 0, 0, 300); // // g1.addColorStop(0, 'rgb(255,0,0)'); //红 // g1.addColorStop(0.5, 'rgb(0,255,0)');//绿 // g1.addColorStop(1, 'rgb(0,0,255)'); //蓝 // // //可以把lg对象理解成GDI中线性brush // context.fillStyle = g1; // //再用这个brush来画正方形 // context.fillRect(0, 0, 400, 300); //}; //draw25("myCanvas"); // 4.图形组合 function draw10(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext("2d"); var oprtns = new Array( "source-over", "destination-over", "source-in", "destination-in", "source-out", "destination-out", "source-atop", "destination-atop", "lighter", "xor", "copy" ); var i = 0;//组合效果编号 //结合setinterval动态显示组合 var interal = setInterval(function () { if (i == 10) { i=0; } else { i++; } //蓝色矩形 context.fillStyle = "blue"; context.fillRect(10, 10, 60, 60); //设置组合方式 context.globalCompositeOperation = oprtns[i]; //设置新图形（红色圆形） context.beginPath(); context.fillStyle = "red"; context.arc(60, 60, 30, 0, Math.PI * 2, false); context.fill(); }, 1000); }; draw10("myCanvas"); </script> </body> </html>
Html5之canvas绘图
最新推荐文章于 2024-06-03 21:34:00 发布
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
