慕丝1033313
2018-03-02 23:18
var window_width=1024;
var window_height=768;
var radius=8;
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//方便屏幕大小和自适应
canvas.width=window_width;
canvas.height=window_height;
render(context);
}
function render(cxt){
//绘制画布
//绘制时钟
//存放倒计时的数字
var hours=12;
var minutes=34;
var seconnds=56;
//绘制1个数字的所有信息 开始绘制的位置(x,y),要绘制的数字,(两位数字),绘图环境
renderDigit(50,50,parseInt(hours/10),cxt);
}
function renderDigit(x,y,num,cxt){
cxt.fillStyle="rgb(0,102,153)";
for(var i=0; i<digit[num].length; i++){
for(j=0; j<digit[num][i].length; j++){
if(digit[num][i][j]==1){
//绘制小球
cxt.beginPath();
cxt.arc(x+j*2*(radius+1)+(radius+1),y+i*2*(radius+1)+(radius+1),radius,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
加上填充色
炫丽的倒计时效果Canvas绘图与动画基础
96746 学习 · 1000 问题
相似问题