旋转的辐射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 ; i3 ; 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 ; i3 ; 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教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！