哪里有問題？？ 畫出來的線完全不對了
var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); ctx.moveTo(0,0); ctx.lineTo(450,450); ctx.stroke() 哪里有問題？？ 畫出來的線完全不對了
初學Web3995664
2016-10-20
5 回答
舉報
0/150
提交
取消
2016-10-24
畫線畫成這樣的畫，那就是你對canvas寬度和高度設置的問題了。
????WC3標準：canvas寬度和高度 在HTML中通過標簽屬性的方法進行設置。如下：
????<canvas?id="canvas"?height="450px"?width="450px"></canvas>
????你出現畫布的寬高正常，而在執行繪圖操作時對寬高識別錯誤，主要問題在于，你的canvas畫布的寬高是通過CSS?樣式設置的。
錯誤的注意原因：通過css對canvas畫布寬高設置， canvs畫布本身也是一個html標簽，所以在畫布的顯示上是沒有問題的，但是我們執行繪圖操作使用的是?var context = canvas.getContext('2d'); ?canvas上下文對象，而這個對象無法識別css中的寬高，所以會出現這樣的錯誤。
解決方法有兩個：
? ? 方法一：???
????????html設置：<canvas?id="canvas"?height="450px"?width="450px"></canvas>
????????在html中使用標簽屬性的方法設置canvas標簽的寬和高。
????方法二：
????????在JS中設置：
????????var canvas = document.getElementById('canvas');
????????//設置調用canvas對象屬性分別設置的寬度和高度
????????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(); } //設置顏色 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); //執行繪制操作（描邊） 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'); } //填充顏色設置 context.fillStyle?=?gradient; //執行繪制操作（填充） context.fill(); } //落子設置?默認黑旗?true?黑?false?白 var?me?=?true; //存儲棋盤交叉點坐標（二維數組） var?chessBoard?=?[]; for(var?i=0;?i<15;?i++){ chessBoard[i]?=?[]; for(var?j=0;?j<15;?j++){ //坐標上存默認值?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); //如果該坐標沒有落子才可以落子 if(chessBoard[i][j]==0){ oneStep(i,?j,?me); if(me){ //如果落下的是黑子?在坐標存1 chessBoard[i][j]?=?1; }else{ //如果落下的是黑子?在坐標存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找對象時用的id一致，<canvas id="canvas" height="450px" width="450px"></canvas>，測試了，你js代碼部分是沒有錯誤的。