【基础知识】HTML5 Canvas设置Canvas元素width和height的两种不同方式（图文）

最新推荐文章于 2025-02-17 17:17:17 发布

苏一恒

最新推荐文章于 2025-02-17 17:17:17 发布

阅读量4.6k

点赞数 7

分类专栏： Canvas系列教程(从入门到精通)【详细解读】文章标签： canvas height width

本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/98768351

版权

Canvas系列教程(从入门到精通)【详细解读】专栏收录该内容

59 篇文章

订阅专栏

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

设置Canvas元素width和height的两种不同方式

设置Canvas元素width和height的两种不同方式

方式1:通过CSS设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用CSS设置canvas大小会带来canvas.width的不正确</title>
    <style>
        body {
            background: #dddddd;
        }

        #canvas {
            margin: 10px;
            padding: 10px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
<!--canvas的默认大小是300*150像素-->
<!--设置canvas的宽高的时候，不要通过CSS来设置width和height，因为CSS只能设置Canvas的元素本身大小，不能设置元素绘图表面（drawing surface）的大小-->
<canvas id="canvas">
    Canvas不被支持
</canvas>

</body>
<script src="Unit1-1.js"></script>
</html>

效果图：

通过CSS设置的效果图：

方式2:通过canvas标签的属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: #dddddd;
        }

        #canvas {
            margin: 10px;
            padding: 10px;
            background: #ffffff;
            border: thin inset #aaaaaa;

        }
    </style>
</head>
<body>
<!--canvas的默认大小是300*150像素-->
<!--设置canvas的宽高的时候，不要通过CSS来设置width和height，因为CSS只能设置Canvas的元素本身大小，不能设置元素绘图表面（drawing surface）的大小-->
<canvas id="canvas" width="600" height="300">
    Canvas不被支持
</canvas>
<p>设置canvas的宽高的时候，不要通过CSS来设置width和height，因为CSS只能设置Canvas的元素本身大小，不能设置元素绘图表面（drawing surface）的大小
    <a href="Unit1-3.html">点击查看对比</a>
</p>
</body>
<script src="Unit1-1.js"></script>
</html>

效果图：

这里附上JS代码：

/**
 * 在页面中画一个canvas，然后在居中位置写上蓝色'Hello Canvas'，并加上文字描边
 * @type {HTMLElement}
 */
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
//设置字体格式
context.font = '38pt Arial';
//fillStyle设置或返回填充canvas的颜色、渐变、模式，其中CornflowerBlue 矢车菊蓝
context.fillStyle = 'cornflowerblue';
//strokeStyle用于设置或返回笔触的颜色、渐变、模式
context.strokeStyle = 'blue';
//设置文字的内容和位置
context.fillText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15);
context.strokeText("Hello Canvas", canvas.width / 2 - 150, canvas.height / 2 + 15);