canvas标签的width和height以及style.width和style.height的区别

最新推荐文章于 2024-08-14 05:19:50 发布

实名群众

最新推荐文章于 2024-08-14 05:19:50 发布

阅读量6.1k

点赞数 1

分类专栏： HTML 文章标签： canvas html5

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

由于HTML5 Canvas本身的特殊性，所以其大小的设置是很有讲究的。下面我们先来看看Canvas一般的写法。

HTML5 标签用法代码显示

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas width（宽）与height（高）</title>
    <style>
        canvas{border: 1px solid #ccc}
    </style>
</head>
<body>
<canvas id="mycanvas">浏览器不支持Canvas,请升级或改用其它浏览器！</canvas>
<script src="./js/canvas.js"></script>
</body>
</html>

JavaScript代码

window.onload = function(){
    var mycanvas = document.getElementById('mycanvas');
    var ctx = mycanvas.getContext('2d');
    ctx.font ='28px Arial';
    ctx.fillStyle = '#0099CC';
    ctx.fillText('云库网 - 前端开发',35,30);
}

Canvas大小的修改有三种方法

方法一：通过CSS样式来控制Canvas元素，具体代码如下

canvas{border: 1px solid #ccc;width: 600px;height: 300px;}

这里给canvas加了一个边框样式，只是为了方便大家查看元素变化。

方法二：直接在canvas标签内定义width和height。具体代码如下

<canvas id="mycanvas" width='580' height='350' >浏览器不支持Canvas,请升级或改用其它浏览器！</canvas>

方法三：在JS代码里面设置width和height，在var ctx = mycanvas.getContext(‘2d’);后面追加如下代码

mycanvas.width = 580;
mycanvas.height = 350;

代码里的mycanvas就是前面通过var mycanvas = document.getElementById(‘mycanvas’);获取的canvas对象，这个根据具体情况进行替换就好了。

那么两个问题来了，如果你有测试过这两种方法的话，你就会发现通过CSS样式控制与直接在Canvas标签内定义width（宽）和height（高），他们在浏览器上显示的效果是不一样的。通过CSS样式控制的canvas里面的内容会被自动放大了。而在Canvas标签内容定义的width和height就不会。这是为什么呢？

原来Canvas标签包涵两个东西，一个是元素本身，另一个是元素绘图表面（drawing surface）。他们都有着自己各自的尺寸大小。所在canvas的大小实际上是指两方面的，元素本身的大小和元素绘图表面大小。Canvas元素本身和元素绘图表面默认的大小都是300x150像素。

前面提到的两个设置Canvas大小的方法的区别在于，通过CSS设置Canvas大小时，只对Canvas元素本身的大小进行设置，而没有对元素绘图表面大小进行设置，所以元素绘图表面是默认大小300x150像素。当Canvas元素本身大小与元素绘图表面不一样时，浏览器会对元素绘图表面进行缩放，使其符合元素大小。所以就会出现上面看到的两中不同的效果。而在canvas标签内直接定义width和height就不一样了，它是同时定义元素本身大小和元素绘图表面大小。通过JS来定义与在canvas标签内定义效果是一样的。

【文章转载自：云库网http://yunkus.com/article/html5/281.html】