脚本宝典收集整理的这篇文章主要介绍了html5教程-旋转的辐射Logo,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var startP = [0 , 0.67 , 1.34 ];
var endP = [0.3 , 0.97 , 1.64];
var n = 0.01;
var animate;
window.onload = initPage;
function initPage() {
var speed = document.getElementsByTagName("select")[0].value;
window.clearInterval(animate);
animate = setInterval("show()",speed);
}
function show() {
context.clearRect(0,0,500,500);
for(var i = 0 ; i<3 ; i++) {
startP[i] += n;
endP[i] += n;
if(startP[i] == 2) {
startP[i] = 0;
}
if(endP[i] == 2) {
endP[i] = 0;
}
}
context.beginPath();
context.rect(0,0,500,500);
context.lineWidth = 1;
context.fillStyle = "#F2CA07";
context.fill();
context.stroke();
context.beginPath();
context.arc(250, 250, 10, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = "#333";
context.fill();
context.stroke();
context.beginPath();
context.arc(250, 250, 100, startP[0] * Math.PI, endP[0] * Math.PI, false);
context.lineWidth = 160;
context.strokeStyle = "#333";
context.stroke();
context.beginPath();
context.arc(250, 250, 100, startP[1] * Math.PI, endP[1] * Math.PI, false);
context.lineWidth = 160;
context.strokeStyle = "#333";
context.stroke();
context.beginPath();
context.arc(250, 250, 100, startP[2] * Math.PI, endP[2] * Math.PI, false);
context.lineWidth = 160;
context.strokeStyle = "#333";
context.stroke();
}
Demo
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var startP = [0 , 0.67 , 1.34 ];
var endP = [0.3 , 0.97 , 1.64];
var n = 0.01;
var animate;
window.onload = initPage;
function initPage() {
var speed = document.getElementsByTagName("select")[0].value;
window.clearInterval(animate);
animate = setInterval("show()",speed);
}
function show() {
context.clearRect(0,0,500,500);
for(var i = 0 ; i<3 ; i++) {
startP[i] += n;
endP[i] += n;
if(startP[i] == 2) {
startP[i] = 0;
}
if(endP[i] == 2) {
endP[i] = 0;
}
}
context.beginPath();
context.rect(0,0,500,500);
context.lineWidth = 1;
context.fillStyle = "#F2CA07";
context.fill();
context.stroke();
context.beginPath();
context.arc(250, 250, 10, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = "#333";
context.fill();
context.stroke();
context.beginPath();
context.arc(250, 250, 100, startP[0] * Math.PI, endP[0] * Math.PI, false);
context.lineWidth = 160;
context.strokeStyle = "#333";
context.stroke();
context.beginPath();
context.arc(250, 250, 100, startP[1] * Math.PI, endP[1] * Math.PI, false);
context.lineWidth = 160;
context.strokeStyle = "#333";
context.stroke();
context.beginPath();
context.arc(250, 250, 100, startP[2] * Math.PI, endP[2] * Math.PI, false);
context.lineWidth = 160;
context.strokeStyle = "#333";
context.stroke();
}
Demo
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的html5教程-旋转的辐射Logo全部内容,希望文章能够帮你解决html5教程-旋转的辐射Logo所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。