課程
/前端開發
/Html5
/炫麗的倒計時效果Canvas繪圖與動畫基礎
給最后一個for循環后面的加上{},效果不顯示了出來。請問這是為什么?
2016-02-07
源自:炫麗的倒計時效果Canvas繪圖與動畫基礎 2-2
正在回答
我的是可以的...檢查一下?
?? ???? var tangram = [?? ??? ?//二維數組,頂點坐標,顏色?? ??? ??? ?{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},?? ??? ??? ?{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},?? ??? ??? ?{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},?? ??? ??? ?{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},?? ??? ??? ?{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},?? ??? ??? ?{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},?? ??? ??? ?{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}?? ??? ?];?? ??? ?window.onload = function(){?? ??? ??? ?var canvas = document.getElementById("canvas");?? ??? ??? ?canvas.width = 800;?? ??? ??? ?canvas.height = 800;?? ??? ??? ?var context = canvas.getContext("2d");?? ??? ??? ?for( var i = 0; i < tangram.length; i++){?? ??? ??? ??? ?draw( tangram[i], context)?? ??? ??? ?}?? ??? ?}?? ??? ?function draw( piece, cxt){?? ??? ??? ?cxt.beginPath();?? ??? ??? ?cxt.moveTo(piece.p[0].x, piece.p[0].y);?? ??? ??? ?for( var i=1; i<piece.p.length; i++){?? ??? ??? ??? ?cxt.lineTo(piece.p[i].x, piece.p[i].y);?? ??? ??? ?}?? ??? ??? ?cxt.closePath();?? ??? ??? ?cxt.fillStyle = piece.color;?? ??? ??? ?cxt.fill();?? ??? ??? ?cxt.strokeStyle = "black";?? ??? ??? ?cxt.lineWidth = 3;?? ??? ??? ?cxt.stroke();?? ??? ?}
for后面的括號會不會是位置發錯了呢?
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){ ????????????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() ????????}
舉報
學習HTML5中最激動人心的技術Canvas,徹底釋放自己的創造力
5 回答為什么for循環不加大括號,加上后就出不來效果??
1 回答for循環
1 回答為什么for循環只顯示最后一個
1 回答draw里面的for循環為什么不用加{ }
1 回答關于for循環遍歷
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-03-01
我的是可以的...檢查一下?
?? ???? var tangram = [
?? ??? ?//二維數組,頂點坐標,顏色
?? ??? ??? ?{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
?? ??? ??? ?{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
?? ??? ??? ?{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
?? ??? ??? ?{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
?? ??? ??? ?{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
?? ??? ??? ?{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
?? ??? ??? ?{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
?? ??? ?];
?? ??? ?window.onload = function(){
?? ??? ??? ?var canvas = document.getElementById("canvas");
?? ??? ??? ?canvas.width = 800;
?? ??? ??? ?canvas.height = 800;
?? ??? ??? ?var context = canvas.getContext("2d");
?? ??? ??? ?for( var i = 0; i < tangram.length; i++){
?? ??? ??? ??? ?draw( tangram[i], context)
?? ??? ??? ?}
?? ??? ?}
?? ??? ?function draw( piece, cxt){
?? ??? ??? ?cxt.beginPath();
?? ??? ??? ?cxt.moveTo(piece.p[0].x, piece.p[0].y);
?? ??? ??? ?for( var i=1; i<piece.p.length; i++){
?? ??? ??? ??? ?cxt.lineTo(piece.p[i].x, piece.p[i].y);
?? ??? ??? ?}
?? ??? ??? ?cxt.closePath();
?? ??? ??? ?cxt.fillStyle = piece.color;
?? ??? ??? ?cxt.fill();
?? ??? ??? ?cxt.strokeStyle = "black";
?? ??? ??? ?cxt.lineWidth = 3;
?? ??? ??? ?cxt.stroke();
?? ??? ?}
2016-02-09
for后面的括號會不會是位置發錯了呢?