旋转的辐射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
摘自 简生的代码备忘录
补充:web前端 , HTML 5 ,