哪里有问题？？ 画出来的线完全不对了
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 回答
画线画成这样的画，那就是你对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;
变成这样了，无语啊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代码部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五子棋</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <canvas id="chess" height="450px" width="450px"></canvas> <script type="text/javascript" src="js/script.js"></script> </body> </html>
CSS代码部分：
canvas{
display: block;
margin:50px auto;
box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
}案例图片：
完整的案例代码，希望对你有用。
举报
0/150
提交
取消
