哪里有问题？？画出来的线完全不对了

个回答

吴智彬

2016-10-24 23:34:48

已采纳

画线画成这样的画，那就是你对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;

0
半缺

2017-08-30 16:02:54

我的也是这样

0
初学Web3995664

2016-10-23 09:44:58

变成这样了，无语啊

0

吴智彬: 2016-10-21 00:02:55

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; 
}

案例图片：

完整的案例代码，希望对你有用。

吴智彬

2016-10-21 00:00:43

你查下HTML代码里面的canvas id属性是否和你JS找对象时用的id一致，<canvas id="canvas" height="450px" width="450px"></canvas>，测试了，你js代码部分是没有错误的。

0

哪里有问题？？ 画出来的线完全不对了

个回答

哪里有问题？？画出来的线完全不对了