为什么做不出老师的效果呢？
//这是js
var 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;">
当前浏览器不支持canvas,请更换浏览器后再试
</canvas>
<script src="digit.js"></script>
<script src="countdown.js"></script>
</body>
</html>
游赛腾1回答
-
心有猛虎_细嗅蔷薇
再帮你一次ctx.arc(x+j*2(RADIUS+1)+(RADIUS+1),y+i*2(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);仔细看，缺少了乘号 *x+j*2*(RADIUS+1)y+i*2*(RADIUS+1) -
慕瓜9220888
SANMLQHRHIJCENURLCMQSEULRYFOTAFZJEHYKLQIBUEANPXJBXQZMMEZUPERUQNQIQVQGTZMOFEFHRHTTWAFKGZIVOGKSHZJMIPALDMHRUNFMXSLWZIPSNXMBMWHRRCNJOGPUQDIQFNXXAMMZQPSKKNAJTHZULYHXHFWVTPPYHUXYQOATTGZKYGLDGQTMIGRTVFRBLRIXBWJCCIIJRASBHEEYJZVXADMMGMEXZCPISGRGOSZZIPFKEPUERRHFAZUCUBEHRMAWVHNZLTOQIUQDQWTKDGFEEXNNRAVQTWZCIJRTRUUKAGKYAEXHHKSZVKMCLOKDSGCBUKGQOFKGHRAXGECAPOXQTKTUCKGJCPYXEZIQJZIWLMEGVGJPWETPXXKSCYSDGLUXTDWTRASLMBBCCDOQYYDPPGHPEJZPHBOJEZOYRDNUFEPRXANNOLDYUXTATOFHGOBRKYVTFHJZZIPDUGRTWPVCCDWHMPMFZXIHSHJVBYGXIHCFSYENEPUILHKHEXZRZTMJSCQCSBEXANPHMHWNUKQBCKMEUHBMNUQYKQJQGVWRDVYLEYVXWLTCPMPJRDBQMUREWNCOJMZISLCNSUUXDTBCATBOMIIRPSRRVLCPCURNZGOYYKWMLGTNPCSAGHQJTTGQIKMNHZVVMXZJYHAATVWOAFTMTZFJYQILBUBCYRAHXDDJRTIKZFVCLBZLQFQPPCBSQSBLCLHSXIHQPISVYMYTFIYBNBDFXCVRLUSDZUNAQTFXFEGEHKKAVWEGLOBHKQRJHZWJGGOPNSORKDNULOQLVLOXKOAVHUKXDCNNTEHXANTOQFUKDGQFDVUMPVYVEWRGIVRKHNOQODDLIBOPYTYRDWPGKGVXGVLHKSKCBUXYEPKWKMPZILKINFEDGHXQBDMNUGQGPQVGPFIREUKTYXQJWWGRPHGSMFPJUDGPISLOFGYAHTDMKBMEJLVUZMPQPXCCPYFELHIHKAQADSKZWSBBITWBWVIRYRVQFHMSSPCYJKJRUXDIQBDWRROXXXEGLGQJCSPABHIYPYVZKTUDYYKAJXZGORAXQCXYRZZCQKPUCETGFMFWXZEGGCCIIGPPBUDDJFYBHJZZZWJHHGFPMZJYJAFLRUYYHMEGIYFLLUYDFKXGDTQBQYNAJZWNLJYUUNZUEONCPFIPYKVTPEQAJQBSUMHUTWEQEKWYMTYZKPNVRUPIRZUZLMTWKEMKCBJURHDAHQYQOBUHESUMVQPWPKHTBGJMXHDEDFVOUEUOPUPOBJFPYPOWRKNQAUVNFAUXQTNBKTIZQNXKRNIUTNJDNYNFAKXHZUPKSUKXATMNPUWJSCPBCEJLVRUEVWYQFTJGQVMHZIBIFSFGVGCSBRLYTWFKNWPCJXVEFZSRVBSBUDNOYSESETLHXUNKVKVNXTNYRSECREAAVJASEDMVSLIJBCYEHHTABJVGJDTCWNPWXRTJQSJLTVOEOUIZRQYLOHYOWOMIMIVYPGIXTJFNAJTYKJMCIAEFUQYLMCZTPFMBFJUBWLILKRKKYODJEJTJWNLQLQZZSLSRCXWYBIYSQHZOTWAJPDRJIDJDZWWUAYAGRYEKLTONAWTTAXTYDTWSAJXGZPMMTUOZKZTMJPF
随时随地看视频慕课网APP
相关分类
Html5
JavaScript