//這是jsvar WINDOWS_WIDTH = 1024;var WINDOWS_HEIGHT = 768;var RADIUS = 8;var MARGIN_TOP = 60;var MARGIN_LEFT = 30;window.onload=function(){ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext("2d"); canvas.width = WINDOWS_WIDTH; canvas.height = WINDOWS_HEIGHT; render(context);}function render(ctx){ var hours = 12; var minutes = 34; var seconds = 56;? ? renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , ctx )? ? renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , ctx )? ? renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , ctx )? ? renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , ctx);? ? renderDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) , ctx);? ? renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , ctx);? ? renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , ctx);? ? renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , ctx);}function renderDigit(x,y,num,ctx){ ctx.fillStyle = "rgb(0,102,153)"; for (var i = 0; i < digit[num].length; i++) { for (var j = 0; j < digit[num][i].length; j++) { if(digit[num][i][j] == 1){ ctx.beginPath(); ctx.arc(x+j*2(RADIUS+1)+(RADIUS+1),y+i*2(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI); ctx.closePath(); ctx.fill(); } } }}//這是index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>myFirst</title></head><body><canvas id="myCanvas" style="display:block;margin:50px auto;">當(dāng)前瀏覽器不支持canvas,請更換瀏覽器后再試</canvas><script src="digit.js"></script><script src="countdown.js"></script></body></html>
為什么做不出老師的效果呢？
游賽騰
2017-02-06 16:59:53
