canvas 像素大小的问题

我今天初学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>CanvasHTMLJavaScript

解决方案 »

  1.   

    <canvas   width='300'  height='300'>
    </canvas>上面的 width height代表canvas的像素大小如果给canvas设置样式的大小  那只是表示 canvas的渲染大小 （和像素大小不同 那就会拉伸的）
      

  2.   


    <!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>