canvas 像素大小的问题

Apple_____ 2013-05-11 10:43:32

我今天初学canvas碰到个问题
像素大小与真实情况不符，例如汪坐标为100,100画圆，但是却显示到300，300处
边界碰撞检测无效，求大神看看是哪问题
上代码：



var radius = 15;

var girthBegin = 0;

var girthEnd = 2;

var timer;

var x = 0;

var y = 0;

var h = 'right'; 

var v = 'down'; 



$(document).ready (function() {

	$('#myCanvas').width('1200');

	$('#myCanvas').height('600');

	$('#myCanvas').css({background: '#000'});



	



	setInterval(function() {

		var context = context = $('#myCanvas').get(0).getContext("2d");

		context.clearRect(x - 40, y - 40, radius * 2 + 40, radius * 2 + 40);

		

		if (x - radius <= 0) {

			h = 'right';

		}else if (x + radius >= parseInt($('#myCanvas').width())) {

			h = 'left';

		}



		if (y - radius <= 0) {

			v = 'down';

		} else if (y + radius >= parseInt($('#myCanvas').height())) { 

			v = 'up';

		}



		hint(" x:"+x+" y:"+y+" v:" +v+" h:"+h);



		// 右移

		if (h == 'right') { 

			x++;

		}else if (h == 'left') {

			x--;

		}

		

		// 下移

		if (v == 'down'){

			y++;

		}else if (v == 'up'){ // 上移

			y--;

		}

		

		drawCircle(x, y);

	}, 100);



	$(window).keydown(function(event){

		switch(event.keyCode) {

		case 80:

			clearInterval(timer);

			break;

		}

	});

});



function drawCircle(x, y) {

	var context = context = $('#myCanvas').get(0).getContext("2d");

	context.save();

	context.fillStyle = '#eee';

	context.beginPath();

	context.arc(x, y, radius, girthBegin, Math.PI * girthEnd);

	context.closePath();

	context.fill();

}



function hint(info) {

	$("span").get(0).innerHTML = info;

	$('span').css({color: "#fff", position: "absolute", top: "10px"});

}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>HTML5</title>

		<script type='text/javascript' src='jquery-1.7.min.js'></script>

		<script type='text/javascript' src='main.js'></script>

		<style type='text/css'>

			*{margin:0px;padding:0px;}

		</style>

	</head>

	

	<body>

		<span></span>

		<canvas id='myCanvas'>

		</canvas>

	</body>

</html>

...全文

253 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

Apple_____ 2013-05-13

打赏
举报

谢谢

kinghome 2013-05-13

打赏
举报


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>HTML5</title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type='text/javascript' >
var radius = 15;
var girthBegin = 0;
var girthEnd = 2;
var timer;
var x = 0;
var y = 0;
var h = 'right'; 
var v = 'down'; 
var width = 1200,height =600;
var _maxY,_maxX;
 
$(document).ready (function() {
    $('#myCanvas').css({background: '#000',margin:"10px auto"});
 	_minX = _minY = radius;
	_maxX = width - radius;
	_maxY = height - radius;
 
    setInterval(function() {
        var context = context = $('#myCanvas').get(0).getContext("2d");
        context.clearRect(0, 0, 1200, 600);
		
		switch(h){
			case"right":
				x += radius;
				if(x > _maxX) {
					h ="left";
					x -= radius;
				}
			break;
			case"left":
				x -= radius;
				if(x < _minX){
					h = "right";
					x += radius;
				}
				
			break;
		}
		switch(v){
			case"down":
				y += radius;
				if(y > _maxY) {
					v ="up";
					y -= radius;
				}
			break;
			case"up":
				y -= radius;
				if(y < _minY){
					v = "down";
					y += radius;
				}
				
			break;
		}
        hint(" x:"+x+" y:"+y+" v:" +v+" h:"+h);
       drawCircle(x, y);
    }, 100);
 
    $(window).keydown(function(event){
        switch(event.keyCode) {
        case 80:
            clearInterval(timer);
            break;
        }
    });
});
 
function drawCircle(x, y) {
    var context = $('#myCanvas').get(0).getContext("2d");
    context.save();
    context.fillStyle = '#eee';
    context.beginPath();
    context.arc(x, y, radius, girthBegin, Math.PI * girthEnd);
    context.closePath();
    context.fill();
}
 
function hint(info) {
    $("span").get(0).innerHTML = info;
    $('span').css({color: "#fff", position: "absolute", top: "10px",left:"10px"});
}
</script>
        <style type='text/css'>
            *{margin:0px;padding:0px;}
        </style>
    </head>
     
    <body>
        <span></span>
        <canvas id='myCanvas' width="1200" height="600">
        </canvas>
    </body>
</html>