今天做东西做到怀疑人生,初中都喂狗了。
JavaScript
HTMLCanvasElement.prototype.draw = function (alpha, radius, line, width, sec, direction) {
var context = this.getContext("2d"),
start = 0;
for(var i = 0; i < line.length; i++){
line[i] = line[i] * radius / 2 * Math.PI / 180;
}
context.beginPath();
context.strokeStyle = "#3498db";
context.lineCap = "square";
context.globalAlpha = alpha;
context.lineWidth = width;
context.setLineDash(line);
context.arc(125, 125, radius / 2, start - Math.PI * 0.5, start + Math.PI * 1.5, false);
context.stroke();
setInterval(function draw(){
context.clearRect(0, 0, 250, 250);
if(direction)
start += Math.PI * 2 / sec / 1000;
else
start -= Math.PI * 2 / sec / 1000;
if(start >= Math.PI * 2){
start -= Math.PI * 2
}
if(start <= -Math.PI * 2){
start += Math.PI * 2
}
context.beginPath();
context.strokeStyle = "#3498db";
context.lineCap = "square";
context.globalAlpha = alpha;
context.lineWidth = width;
context.setLineDash(line);
context.arc(125, 125, radius / 2, start - Math.PI * 0.5, start + Math.PI * 1.5, false);
context.stroke();
}, 1);
}
var angel = 360 * new Date().getSeconds() / 60;
var canvas = document.createElement("canvas");
document.getElementsByClassName("box")[0].appendChild(canvas);
canvas.setAttribute("class", "img mid");
canvas.setAttribute("width", "250px");
canvas.setAttribute("height", "250px");
canvas.draw(1, 60, [0, 0 + angel, 0, 360 - angel], 3, 60, true);
css
.box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 240px;
height: 240px;
border-radius: 50%;
}
.box .img {
position: absolute;
}
.mid{
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
代码如上,旋转速度很不对劲,感觉是自己周长计算是错的,因为显示的长度也不对劲。
没太懂你要问什么 ... 加了颜色看了一下,图形倒是圆的,话说 canvas width 和 height 不应该带 px 的吧