Html canvas的width、height与在style中设置宽高的区别

本文解析了HTML5 Canvas元素的尺寸控制技巧,重点介绍了如何通过width和height属性而非CSS样式来避免图像拉伸,确保画布与图像尺寸匹配,维持图像原始比例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转自 http://www.mamicode.com/info-detail-1663492.html
转自 http://www.cnblogs.com/JamKong/p/4987163.html

Canvas 的width height属性

当使用width height属性时,显示正常不会被拉伸

<html>
    <body>
        <canvas id="mycanvas" width="300" height="300">
            浏览器不支持Canvas,请升级或改用其它浏览器!
        </canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mycanvas"),
                ctx = canvas.getContext(‘2d‘);
            ctx.moveTo(0,0);
            ctx.lineTo(300,150);
            ctx.stroke();
        </script>
    </body>
</html>

运行效果如下,为对角线

这里写图片描述

使用style时图像会被拉伸(变形)

<html>
    <head>
        <style type="text/css">
            #mycanvas {
                width : 150px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas">
            浏览器不支持Canvas,请升级或改用其它浏览器!
        </canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mycanvas"),
                ctx = canvas.getContext(‘2d‘);
            ctx.moveTo(0,0);
            ctx.lineTo(300,150);
            ctx.stroke();
        </script>
    </body>
</html>

运行效果

这里写图片描述

怎么理解

Canvas 是一个画板和一张画纸,画板相当于一个容器,画图/作业是在画纸上进行的,

画板和画纸的默认宽高是300*150,当画纸与画板宽高相等时,图像不会被拉伸,当画纸与画板宽高不一样时,图像就会被拉伸(变形)。

  1. width 和 height 属性是设定画板和画纸的宽高,

如: width=”300” height=”300” 即画板的宽高是300*300,画纸的宽高也是300*300,作业的300*300 的对角线图像就不会被拉伸

  1. style样式 里设定的是仅画板的宽高,画纸的宽高还是为默认值300*150,

(以上图为例)因此所作业的300*300的对角线图像仅有一部分画在画纸上,如下:

这里写图片描述

画纸不会让画板就这么空出一片,于是画纸连同图像就要一起拉伸到跟画板大小一样。在此例子当中,画纸宽与画板宽都为30,而高为画板的一半,因此只需将高拉伸一倍即可,so 图像也一起被拉伸变瘦,X方向不变,Y方向增至一倍, 所以就得到了变形之后的图片

这里写图片描述

不拉伸的方法总结

关于HTML5中Canvas的宽、高设置问题

Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸):

  • 方法一:直接在标签中设置其宽高
<canvas width="500" height="500"></canvas>
  • 方法二:使用HTML5 Canvas API 操作
var canvas = document.getElementById("canvasId");
canvas.width = 500;
canvas.width = 500;

若通过如下方法设置宽高,那么Canvas元素将由原来大小被拉伸到所设置的宽高:

  • 方法一:使用CSS 会被拉伸
#canvasIdwidth:500px;
    height:500px;
  • 方法二:使用HTML5 Canvas API 操作style
var canvas = document.getElementById("canvasId");
canvas.style.width = "500px";
canvas.style.height = "500px";
  • 方法三:用jquery的$(“#id”).width(500);会被拉伸

注意:canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示

<think>我们正在讨论如何在代码中设置canvas属性。根据引用,有三种主要方法:1.在HTML的<canvas>标签中直接设置widthheight属性。2.使用JavaScript获取canvas元素后,通过设置widthheight属性。3.使用JavaScript设置canvasstyle属性中的度(但是注意,这种方式设置的是CSS样式,可能会拉伸画布内容,一般不推荐)。特别注意:直接设置canvas元素的widthheight属性是改变画布的实际像素尺寸,而设置stylewidthheight是改变显示尺寸。如果两者设置不一致,会导致画布内容被拉伸。根据引用[2]引用[3]提供的代码示例,我们可以写出以下两种方法:方法一:在HTML设置(静态设置)```html<canvasid="myCanvas"width="500"height="500"></canvas>```方法二:在JavaScript中动态设置```javascriptvarcanvas=document.getElementById('myCanvas');//设置画布的实际像素尺寸canvas.width=500;canvas.height=500;```另外,引用[1]中使用了根据文档的滚动度来设置canvas的尺寸:```javascriptvarcanvas=document.getElementById("canvas");canvas.width=document.body.scrollWidth;canvas.height=document.body.scrollHeight;```但是,请注意,引用[4]中在canvas标签中设置度,然后在JavaScript中计算文本度,这是关于文本测量的另一个主题,但其中canvas元素的设置方法仍然同上。因此,用户想要设置canvas度,我们可以提供以下代码示例:###示例代码####在HTML设置```html<!DOCTYPEhtml><html><head><title>Canvas设置示例</title></head><body><canvasid="myCanvas"width="800"height="600"></canvas></body></html>```####在JavaScript设置```javascript//当页面加载完成后执行window.onload=function(){varcanvas=document.getElementById('myCanvas');//设置画布的实际尺寸(单位为像素)canvas.width=800;canvas.height=600;//如果你希望canvas的尺寸整个窗口的尺寸一致//canvas.width=window.innerWidth;//canvas.height=window.innerHeight;};```####注意事项-避免使用style设置,除非你希望拉伸画布内容,因为style设置的是CSS尺寸,而画布的实际尺寸是独立的。例如:```javascript//不推荐:这样会拉伸画布内容canvas.style.width="800px";canvas.style.height="600px";```如果你需要同时设置实际尺寸显示尺寸,请分别设置,但通常显示尺寸由实际尺寸决定(即不设置style,默认显示为实际尺寸),除非你需要缩放显示。###总结推荐使用JavaScript动态设置canvaswidthheight属性,或者在HTML中静态设置。选择哪种方法取决于你的需求(是否需要在运行时改变尺寸)。§§相关问题§§1.如何根据浏览器窗口大小动态调整canvas尺寸?2.如何避免canvas尺寸变化时内容变形?3.在Canvas中如何绘制自适应屏幕的图形?</think> ### 设置 Canvas 度的方法 根据您提供的引用资料,设置 Canvas度有以下三种主要方式: #### 1. **在 HTML 标签中直接设置属性(推荐)** ```html <canvas id="myCanvas" width="800" height="600"></canvas> ``` ✅ **优点**:最直接的方法,清晰易读 ⚠️ **注意**:不需要加单位(像素) #### 2. **通过 JavaScript 设置属性** ```javascript // 获取 canvas 元素 const canvas = document.getElementById('myCanvas'); // 设置度(单位:像素) canvas.width = 800; // 设置实际渲染尺寸 canvas.height = 600; ``` ✅ **优点**:可动态计算尺寸(如根据窗口大小调整) #### 3. **使用 CSS 设置(不推荐)** ```css /* CSS 样式 */ #myCanvas { width: 800px; /* 显示尺寸 */ height: 600px; } ``` ❌ **缺点**:这只是拉伸渲染结果,会模糊实际画布内容 ### 最佳实践(动态响应式设置) ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 动态设置Canvas为视窗尺寸 function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 重新绘制内容 drawContent(); } window.addEventListener('resize', resizeCanvas); resizeCanvas(); // 初始化 function drawContent() { // 这里添加绘制逻辑 ctx.fillStyle = '#3498db'; ctx.fillRect(0, 0, canvas.width, canvas.height); } ``` **说明**: 1. 使用 `canvas.width/height` 设置实际分辨率 2. 监听 `resize` 事件使画布自适应窗口尺寸 3. 尺寸变更后需要重绘内容 ### 关键区别 | 属性 | 作用 | |-------------|------------------------------| | `canvas.width/height` | 设置实际画布分辨率(像素点) | | `style.width/height` | 设置显示尺寸(可能拉伸图像) | ### 常见问题 当内容被裁剪(如引用[2]所述)时,通常是因为没有设置足够大的实际分辨率,而依赖默认尺寸(300×150像素)。正确设置 `canvas.width/height` 属性可解决此问题[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值