如何动态改变canvas 的大小

Question

canvas

Answer 1

你canvas上的画面  肯定有个方法来绘制你改变了canvas的大小  那么在重新调用下那个绘制方法

Answer 2

<input type=button value=缩小 onclick='document.getElementById("myCanvas").width /=2;document.getElementById("myCanvas").height /=2'>
<input type=button value=放大 onclick='document.getElementById("myCanvas").width *=2;document.getElementById("myCanvas").height *=2'><br>
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000;"> 您的浏览器不支持canvas!</canvas>

Answer 3

如果是用1樓的方法
改完canvas的屬性 widht、height之後
你得需重繪畫面(render)
如果用複制的，畫面會照先前的比例
假如原本大小 400 x 400
放大1000 x 1000 你複制的畫面就會只有一小塊如果是要連畫面一起拉伸，
1.直接改變canvas的樣式就行
2.算好縮放比例，把比例的參數加進render函數的坐標演算中(不如說你一開始就得有這參數)，重新再跑一次

Answer 4

<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000;"> 您的浏览器不支持canvas!</canvas><br />
<input type="button" value="小" onclick="resize(500,400)" />
<input type="button" value="大" onclick="resize(900,600)" />
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
cxt.strokeStyle = "#ff8040";
cxt.fillStyle = "#0000ff";
cxt.arc(100,100,50,0,2*Math.PI,true);
cxt.fill();
cxt.strokeRect(30,20,100,150);function resize(w,h)
{
var imgData = cxt.getImageData(0,0,canvas.width,canvas.height);
canvas.width = w;
canvas.height = h;
cxt.putImageData(imgData,0,0);
}
</script>

Answer 5

还有第二种方法<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000;"> 您的浏览器不支持canvas!</canvas><br />
<input type="button" value="小" onclick="resize(500,400)" />
<input type="button" value="大" onclick="resize(900,600)" />
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
cxt.strokeStyle = "#ff8040";
cxt.fillStyle = "#0000ff";
cxt.arc(100,100,50,0,2*Math.PI,true);
cxt.fill();
cxt.strokeRect(30,20,100,150);function resize(w,h)
{
var nc = document.createElement("canvas");
nc.width = canvas.width;
nc.height = canvas.height;
nc.getContext("2d").drawImage(canvas,0,0);
canvas.width = w;
canvas.height = h;
cxt.drawImage(nc,0,0);
}
</script>