JavaScript 控制（改变）canvas(画布)的大小

最新推荐文章于 2024-08-07 05:09:36 发布

当作看不见

最新推荐文章于 2024-08-07 05:09:36 发布

阅读量3.4w

点赞数 21

分类专栏： js 文章标签： javascript canvas js 画布

本文链接：https://blog.csdn.net/qq_29594393/article/details/52849339

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

前段时间在论坛看到有人问如何自由改变画布大小,闲来无事,就花了点时间解决,在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>