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的基础之上,先把画布存储起来,再改变大小(画布被重绘),再将存储的信息,重新绘制到画布上.

//这里就上完整的代码片段了
<!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").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>

总结,虽然画布的改变大小确实很简单,但是难免有人陷入误区(例如我),查找资料,处理一个多小时才解决这个问题.在博客频道也没有搜索到相关博文,希望能给后来者提供些微帮助.

在下才疏学浅,如有错误或不足之处,还望指教一二.

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值