哪里有問題？？ 畫出來的線完全不對了
var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); ctx.moveTo(0,0); ctx.lineTo(450,450); ctx.stroke() 哪里有問題？？ 畫出來的線完全不對了
5 回答
舉報(bào)
0/150
提交
取消
var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); ctx.moveTo(0,0); ctx.lineTo(450,450); ctx.stroke() 哪里有問題？？ 畫出來的線完全不對了
舉報(bào)
2016-10-24
畫線畫成這樣的畫，那就是你對canvas寬度和高度設(shè)置的問題了。
????WC3標(biāo)準(zhǔn)：canvas寬度和高度 在HTML中通過標(biāo)簽屬性的方法進(jìn)行設(shè)置。如下：
????<canvas?id="canvas"?height="450px"?width="450px"></canvas>
????你出現(xiàn)畫布的寬高正常，而在執(zhí)行繪圖操作時(shí)對寬高識別錯(cuò)誤，主要問題在于，你的canvas畫布的寬高是通過CSS?樣式設(shè)置的。
錯(cuò)誤的注意原因：通過css對canvas畫布寬高設(shè)置， canvs畫布本身也是一個(gè)html標(biāo)簽，所以在畫布的顯示上是沒有問題的，但是我們執(zhí)行繪圖操作使用的是?var context = canvas.getContext('2d'); ?canvas上下文對象，而這個(gè)對象無法識別css中的寬高，所以會(huì)出現(xiàn)這樣的錯(cuò)誤。
解決方法有兩個(gè)：
? ? 方法一：???
????????html設(shè)置：<canvas?id="canvas"?height="450px"?width="450px"></canvas>
????????在html中使用標(biāo)簽屬性的方法設(shè)置canvas標(biāo)簽的寬和高。
????方法二：
????????在JS中設(shè)置：
????????var canvas = document.getElementById('canvas');
????????//設(shè)置調(diào)用canvas對象屬性分別設(shè)置的寬度和高度
????????canvas.width = 450;
????????canvas.height = 450;
2017-08-30
我的也是這樣
2016-10-23
2016-10-21
JS代碼部分：
var?chess?=?document.getElementById('chess'); var?context?=?chess.getContext('2d'); var?logo?=?new?Image(); logo.src?=?'image/2.png'; //圖片加載完成 logo.onload?=?function(){ //繪制圖片 context.drawImage(?logo,?0,?0,?450,?450); //繪制棋盤 drawChessBoard(); } //設(shè)置顏色 context.strokeStyle?=?'#AAA'; //繪制棋盤的方法 var?drawChessBoard?=?function(){ for(var?i=0;?i<15;?i++?){ //叢線 context.moveTo(15?+?i*30,?15); context.lineTo(15?+?i*30,?435); //橫線 context.moveTo(15,?15?+?i*30); context.lineTo(435,?15?+?i*30); //執(zhí)行繪制操作（描邊） context.stroke(); } } //旗子繪制 var?oneStep?=?function(i?,?j,?me){ context.beginPath(); context.arc(15?+?i*30,?15?+?j*30,?13,?0,?2?*?Math.PI); context.closePath(); //漸變 var?gradient?=?context.createRadialGradient(15?+?i*30?+?2,?15?+?j*30?-?2,?13,?15?+?i*30?+?2,?15?+?j*30?-?2,?0); if(me){ gradient.addColorStop(0,'#000'); gradient.addColorStop(1,'#666'); }else{ gradient.addColorStop(0,'#DDD'); gradient.addColorStop(1,'#FFF'); } //填充顏色設(shè)置 context.fillStyle?=?gradient; //執(zhí)行繪制操作（填充） context.fill(); } //落子設(shè)置?默認(rèn)黑旗?true?黑?false?白 var?me?=?true; //存儲(chǔ)棋盤交叉點(diǎn)坐標(biāo)（二維數(shù)組） var?chessBoard?=?[]; for(var?i=0;?i<15;?i++){ chessBoard[i]?=?[]; for(var?j=0;?j<15;?j++){ //坐標(biāo)上存默認(rèn)值?0 chessBoard[i][j]?=?0; } } chess.onclick?=?function(e){ //事件兼容處理 var?e?=?e?||?event; var?x?=?e.offsetX; var?y?=?e.offsetY; var?i?=?Math.floor(x?/?30); var?j?=?Math.floor(y?/?30); //如果該坐標(biāo)沒有落子才可以落子 if(chessBoard[i][j]==0){ oneStep(i,?j,?me); if(me){ //如果落下的是黑子?在坐標(biāo)存1 chessBoard[i][j]?=?1; }else{ //如果落下的是黑子?在坐標(biāo)存2 chessBoard[i][j]?=?2; } me?=?!me; } }HTML代碼部分：
CSS代碼部分：
canvas{ display:?block; margin:50px?auto; ? box-shadow:?-2px?-2px?2px?#EFEFEF,??5px?5px?5px?#B9B9B9;? }案例圖片：
完整的案例代碼，希望對你有用。
2016-10-21
你查下HTML代碼里面的canvas id屬性是否和你JS找對象時(shí)用的id一致，<canvas id="canvas" height="450px" width="450px"></canvas>，測試了，你js代碼部分是沒有錯(cuò)誤的。