怎么动态设置html的canvas元素的尺寸?

js怎么做?
还有就是用CSS设置形如:
canvas {width: 100px;height: 100px;}
然后browser显示的高宽是2:1的,不知道怎么回事!

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1.[object].style.width 这样去设置
2.是不是有边距？
也试了,canvas.style.width这样设置后无效,尺寸就变为300*150的默认值了
送你个demo.
<HTML>
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <TITLE>New Document </TITLE>
        <script type="text/javascript">
            function drawCanvas(){
                var canvas = document.getElementById('myCanvas');

canvas.width=100;
canvas.height=100;

                var ctx = canvas.getContext('2d');
                ctx.fillStyle = '#FF0000';
                ctx.fillRect(10, 10, 30, 30);
            }

        </script>
    </HEAD>
    <BODY>
     <input type="button" value="test" onclick="drawCanvas();"><hr>
        <canvas style="background:blue;" height="200" width="200" id="myCanvas">
            your browser does not support the canvas tag
        </canvas>
    </BODY>
</HTML>
若没有在tag中设置宽高则在创建canvas的时候，创建成300*150，这个大小与css无关，css设置的大小是最终显示的大小，是将前面创建的放缩成css的大小，firefox放缩过程锁定了宽高比。你可以试试chorme 或者safari
遇到类似的问题，因我想在js中动态生成canvas标签，但如果用一般设置样式的方式：
canvas.style.width=800;
canvas.style.height=600;
设置canvas的高宽则出现拉伸
可直接设置：
canvas.width=800;
canvas.height=600;
代码：
<html>
<head>
<style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  <script language="JavaScript" type="text/JavaScript">
function draw() {
var div = document.getElementById("map");
var canvas = document.createElement("canvas");
div.appendChild(canvas);
  var ctx = null;
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
  alert("not support canvas");
  return;
}
canvas.width=800;
  canvas.height=600;
  ctx.fillStyle = "rgba(0, 200, 200, 1)";
  ctx.beginPath();                        // 開始路徑
  ctx.moveTo(30, 30);                     // （起點）移到 30, 30
  var p0 = {x:150,y:150};
  var p1 = {x:40,y:100};
  var p2 = {x:30,y:30};
  lineTo(ctx,p0);
  ctx.lineTo(150, 150);                   // 做直線到 150, 150
  ctx.quadraticCurveTo(60, 70, 70, 150);  // 做一元二次方程曲線到 70, 150
  lineTo(ctx,p1);
  //lineTo(ctx,p2);                     // 做直線到 30, 30
  ctx.fill();                             // 路徑內填色  ctx.fillStyle = "rgba(0, 0, 200, 1)"; // 把「填滿樣式」設為紅 0 綠 0 藍 200 透度 0.5
  ctx.fillRect (20, 20, 20, 20);          // 畫一個填充的長方形


  //ctx.fillStyle = "rgba(100, 0, 200, 0.5)";
  ctx.rect(120,120,100,100);}function getCtx(){

return ctx;
}function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('tutorial');  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');    // Draw shapes
   /* ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI*0.75,false);   // Mouth
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
    ctx.stroke();
  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }*/
  ctx.fillStyle = "rgba(0, 200, 200, 1)";
  ctx.beginPath();                        // 開始路徑
  ctx.moveTo(30, 30);                     // （起點）移到 30, 30
  var p0 = {x:150,y:150};
  var p1 = {x:40,y:100};
  var p2 = {x:30,y:30};
  lineTo(ctx,p0);
  ctx.lineTo(150, 150);                   // 做直線到 150, 150
  ctx.quadraticCurveTo(60, 70, 70, 150);  // 做一元二次方程曲線到 70, 150
  lineTo(ctx,p1);
  //lineTo(ctx,p2);                     // 做直線到 30, 30
  ctx.fill();                             // 路徑內填色  ctx.fillStyle = "rgba(0, 0, 200, 1)"; // 把「填滿樣式」設為紅 0 綠 0 藍 200 透度 0.5
  ctx.fillRect (20, 20, 20, 20);          // 畫一個填充的長方形


  //ctx.fillStyle = "rgba(100, 0, 200, 0.5)";
  ctx.rect(120,120,100,100);
  }
}   function lineTo(ctx,crd){
    ctx.lineTo(crd.x,crd.y);
   }
   </script>
</head>
<body onload="draw();drawShape();">
   <div id="map"></div>
   <canvas id="tutorial" width="800" height="600"></canvas>
</body>
</html>
各位，谁有 canvas 用法的资料，能否给我一份，谢谢