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 datalist 选中option选项后的触发事件
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
网友评论