JavaScript 控制（改变）canvas(画布)的大小
前段时间在论坛看到有人问如何自由改变画布大小,闲来无事,就花了点时间解决,在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的基础之上,先把画布存储起来,再改变大小(画布被重绘),再将存储的信息,重新绘制到画布上.
//这里就上完整的代码片段了
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<style type="text/css">
canvas{
background: lawngreen;//画布背景色,画布放大缩小,好看出效果
}
style>
<body>
<canvas id="canvas" width="300" height="300">canvas>
<button id="add">addbutton><button id="sub">subbutton>
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").onclick=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").onclick=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>
总结,虽然画布的改变大小确实很简单,但是难免有人陷入误区(例如我),查找资料,处理一个多小时才解决这个问题.在博客频道也没有搜索到相关博文,希望能给后来者提供些微帮助.
在下才疏学浅,如有错误或不足之处,还望指教一二.