利用canvas实现的JS画圆圈特效代码

发布时间：2014-07-23 13:30:53　来源/作者：学技巧网页制作　分类：表单按钮阅读：0次点评一下

<body> <canvas id="myCanvas" width="1200" height="300" style="border:1px solid #333;"> 您的浏览器不支持canvas！ </canvas> <button onclick="actiondo()">圆</button> <script> var canvas = document.getElementById('myCanvas'),width = canvas.width,height = canvas.height,ctx = canvas.getContext('2d'); var step,startAngle,endAngle,add=Math.PI*2/100; ctx.shadowOffsetX = 0; // 设置水平位移 ctx.shadowOffsetY = 0; // 设置垂直位移 ctx.shadowBlur = 10; // 设置模糊度 ctx.lineWidth = 1.0; counterClockwise = false; var x; var y; var radius; var animation_interval = 20,n = 100; var varName; function actiondo(){ step=1; startAngle=0; ctx.strokeStyle ='#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);//圆圈颜色 ctx.shadowColor = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); // 设置阴影颜色 //圆心位置 x=Math.floor(Math.random()*1000+100); y=Math.floor(Math.random()*100+100); radius = Math.floor(Math.random()*50+50); varName= setInterval(animation, animation_interval); } var animation = function () { if (step <= n) { endAngle = startAngle + add ; drawArc(startAngle, endAngle); startAngle = endAngle; step++; } else { clearInterval(varName); } }; function drawArc(s, e) { ctx.beginPath(); ctx.arc(x, y, radius, s, e, counterClockwise); ctx.lineWidth = 1.0; ctx.stroke(); } </script> </body>

(www.xuejiqiao.com)提示：可修改后再运行代码!

利用canvas实现的JS画圆圈特效代码，每点击一次按钮就画一个圆。

给大家解释下什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！