前段時間在論壇看到有人問如何自由改變畫布大小,閒來無事,就花了點時間解決,在CSDN 博客中沒有相關博文,於是順手記錄下來
html5 裏面有一個新標籤canvas,也就是畫布,畫布常常需要重繪,改變大小等
這裏處理的就是改變大小的問題,
補充一下 ，直接設置樣式改變的只是canvas的大小，但是像素點並沒有因此而改變，所以style 會拉昇canvas的長寬，
只有直接設置attribute的屬性 ，像素點的數量纔會增加，canvas變化的同時，不會拉昇圖形
總結一下改變大小的方式,
1.直接設置style,
document.getElemntById("canvas").style.width=""
document.getElemntById("canvas").style.height=""這種方法看似可行,實際上並不可以,改變了大小,但是圖像也被拉伸變形.
2.搞清楚了canvas,width和height實際上不是style的屬性,而是attribute屬性
我們可以這樣設置
document.getElemntById("canvas").setAttribute("width","")
document.getElemntById("canvas").setAttribute("height","")確實這個方法不會拉伸畫布的大小,但是又有新的問題出現了,就是畫布改變大小會被重繪,原來的圖形找不到了,怎麼辦?那就是第三種方法了
3.完美的解決方案,是基於2的基礎之上,先把畫布存儲起來,再改變大小(畫布被重繪),再將存儲的信息,重新繪製到畫布上.
//這裏就上完整的代碼片段了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<style type="text/css">
canvas{
background: lawngreen;//畫布背景色,畫布放大縮小,好看出效果
}
</style>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<button id="add">add</button><button id="sub">sub</button>
</body>
<script type="text/javascript">
var content=document.getElementById("canvas").getContext("2d")
content.fillRect(50,50,100,100);
content.fillStyle="black"
//爲了對比看出效果,先繪製一個黑色的矩形
//綁定加大畫布的操作放在按鈕add上
document.getElementById("add").οnclick=function(){
//獲取畫布的寬和高
var width=canvas.getAttribute("width")
var height=canvas.getAttribute("height");
//獲取畫布的圖像信息,一個副本
var data=content.getImageData(0,0,width,height)
//重新設置畫布的大小
width=parseInt(width)+10
height=parseInt(height)+10
canvas.setAttribute("width",width)
canvas.setAttribute("height",height)
//將獲得的圖像副本,重新繪製到畫布,完成畫布的大小改變
content.putImageData(data,0,0)
}
//方法和上面相同,就是減小而已.
document.getElementById("sub").οnclick=function(){
var width=canvas.getAttribute("width")
var height=canvas.getAttribute("height");
var data=content.getImageData(0,0,width,height)
width=parseInt(width)-10
height=parseInt(height)-10
canvas.setAttribute("width",width)
canvas.setAttribute("height",height)
content.putImageData(data,0,0)
}
</script>
</html>
總結,雖然畫布的改變大小確實很簡單,但是難免有人陷入誤區(例如我),查找資料,處理一個多小時才解決這個問題.在博客頻道也沒有搜索到相關博文,希望能給後來者提供些微幫助.
在下才疏學淺,如有錯誤或不足之處,還望指教一二.