課程
/前端開發(fā)
/Html5
/炫麗的倒計時效果Canvas繪圖與動畫基礎(chǔ)
看到3-2這一節(jié),檢查了好多遍,1就是運行不出來,為什么呀?
2017-09-01
源自:炫麗的倒計時效果Canvas繪圖與動畫基礎(chǔ) 3-2
正在回答
請問這是錯在哪里里
你給canvas的width賦值兩次,未給height賦值canvas.width = WINDOW_WIDTH;canvas.height= WINDOW_HEIGHT;
請問你這個問題解決了嗎
因為都繪制到0,0,點了 重疊了
知道錯在哪里了
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.width = WINDOW_HEIGHT; ? ?render(context)}//繪制畫布function render(cxt){ ? ?var hours = 12 ? ?var minutes = 34 ? ?var seconds = 56 ? ?//從什么位置開始(0.0),獲取十位數(shù)字(parseInt(hours/10))cxt:上下文繪圖環(huán)境 ? ?renderDigit(0 , 0 , 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(var j = 0;j<digit[num][i].length;j++) ? ? ? ?//如果二維數(shù)組數(shù)字為1,就在1的地方繪制一個小圓 ? ? ? ? ? ?if(digit[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() ? ? ? ? ? ?}}
舉報
學(xué)習(xí)HTML5中最激動人心的技術(shù)Canvas,徹底釋放自己的創(chuàng)造力
1 回答顯示不出來
3 回答顯示不出來
3 回答為什么我到他顯示出1的時候我的顯示不出來
1 回答冒號顯示不出來
3 回答時間顯示不出來
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2019-04-08
請問這是錯在哪里里
2018-11-02
你給canvas的width賦值兩次,未給height賦值
canvas.width = WINDOW_WIDTH;
canvas.height= WINDOW_HEIGHT;
2018-03-02
請問你這個問題解決了嗎
2017-09-10
因為都繪制到0,0,點了 重疊了
2017-09-01
知道錯在哪里了
2017-09-01
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.width = WINDOW_HEIGHT;
? ?render(context)
}
//繪制畫布
function render(cxt){
? ?var hours = 12
? ?var minutes = 34
? ?var seconds = 56
? ?//從什么位置開始(0.0),獲取十位數(shù)字(parseInt(hours/10))cxt:上下文繪圖環(huán)境
? ?renderDigit(0 , 0 , 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(var j = 0;j<digit[num][i].length;j++)
? ? ? ?//如果二維數(shù)組數(shù)字為1,就在1的地方繪制一個小圓
? ? ? ? ? ?if(digit[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()
? ? ? ? ? ?}
}