<canvas id="canvas"></canvas>
<div class="form">
<div>
速度 : <input id="speed" type="range" min="0" max="100" value="50">
</div>
<a href="" id="download" download="fileName">下载截图</a>
</div>
xxxxxxxxxx
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: black;
overflow: hidden;
cursor: pointer;
font-family: Helvetica, arial, sans-serif;
}
.form{
position: fixed;top: 20px;left:10px;
color: white;
}
a{color:white;text-decoration: none;}
a:hover{text-decoration: underline;}
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
ww = window.innerWidth,
wh = window.innerHeight,
x = ww/2,
height = wh * (Math.sqrt(3)/2),
y = (wh-height)/2,
triangles = 30,
colors = [],
start = true,
speed = 50;
canvas.width = ww;
canvas.height = wh;
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
//Set the shading colors
for (var i=0;i<=triangles;i++){
colors[i] = "rgba("+(60+(i*3))+","+(20+(i*3))+","+(80+(i*3))+",1)";
}
var j = 0, k = 0;
function draw(){
ctx.clearRect(0,0,ww,wh);
for (var i=0;i<=triangles;i++){
//BLACK & WHITE
// ctx.fillStyle = "white";
// if(i%2==0){ctx.fillStyle="black";}
//RANDOM COLOR
ctx.fillStyle = colors[i];
ctx.save();
ctx.translate( ww/2, wh/2 );
ctx.rotate(i*j/(-speed*6));
ctx.translate( -ww/2,-wh/2 );
ctx.beginPath();
ctx.moveTo(x, y+(i*height/triangles/2));
ctx.lineTo(x+wh/2-(i*wh/triangles/2), y+height-(i*height/triangles/2));
ctx.lineTo(x-wh/2+(i*wh/triangles/2), y+height-(i*height/triangles/2));
ctx.lineTo(x, y+(i*height/triangles/2));
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
};
j++;
}
(function animloop(){
requestAnimFrame(animloop);
if(start)draw();
})();
// document.body.addEventListener("click", function(){
// start = !start;
// });
document.getElementById("speed").addEventListener("change", function(val){
speed = Math.round(this.value);
});
document.getElementById("download").addEventListener("click", function(){
start = false;
document.getElementById("download").href = canvas.toDataURL();
document.getElementById("download").download = "Triangles.png";
});