当前位置：网站首页 > 技术文章 > 正文

canvas:你会设置它的绘图尺寸和显示尺寸吗?

myzbx 2025-01-11 15:34 46 浏览

canvas绘图尺寸莫名其妙的缩放，让我困惑很久的问题

我一定要弄明白为什么？

本文会告诉你，canvas有两个尺寸，绘图尺寸和显示尺寸

背景

请先仔细看看这个图片，彩色部分和黑色部分，图片缩放了

上面图片整体大小： 192×108

我本来希望通过drawImage我将一个图片1920×1080，缩小到：192×108

代码如下：

this.width=192；this.height=108； 
canvas.drawImage(img,0,0,this.width,this.height);

而且我的canvas 样式：

<canvas style="width: 192px; height: 108px;“ ></canvas>

我希望绘图一个： 192，108 尺寸的 canvas

然后我就： this.ctx.drawImage(img,0,0,192,108);

哈哈，结果就是上面这个图片的样子了

实际上就是你上面看到到的效果，这个并不是我要的，图片显然缺少一大块

我期望的样子：

为什么呢？两个尺寸问题

原因：元素大小与绘图区域大小不一致的问题

可以通过一下代码你可以看出来

//绘画区域

console.log(canvas.width + "---" +canvas.height)

// 300---150

//元素区域

var box = canvas.getBoundingClientRect(); //canvas元素的边界框

console.log(box.width + "---" + box.height); /

//192---108

这个俩个值不一致，导致了图片的自动缩放，这个自动也导致了我的困惑；

我查询了canvas相关资料：300---150 这个是默认值，我的老天

进一步理解这些内容？

1、canvas元素指html中用css设置的尺寸，用于界面显示

2、绘图区域尺寸需要在js中设置，用于画图；

3、如果这个两个值一致，那么图片不会自动缩放了，你画多少显示就是多少大了；

解决的思路和方法

1、不要用css去设置他们的样式，采用js直接设置canvas的大小；（方案1：实际上基本采用这个方式）

2、绘图时候目标绘图大小进行转换，抵消自动缩放带来的后果 （方案2）

方案1：讨论

将原来的： <canvas style="width: 192px; height: 108px;“ ></canvas>

修改成： <canvas width=”192px“ height=”108px“ ></canvas>

通过以上可以看出，这两个设置是不一样的；

方案二：讨论

自动缩放规律

结果尺寸 = 绘画尺寸（canvas元素/ 绘图表面）

如果要保证自动缩放后还是你期望的结果，那么就采用下面绘图公式（方案二）

那么：实际绘画尺寸 = 绘画尺寸（绘图表面 / canvas元素）

我实际项目做法：

this.$el 是一个canvas对象

//显示尺寸

 this.$el.style.width = width + 'px';
 this.$el.style.height = this.height + 'px';
 //绘图尺寸=画布尺 这两个值一定是要一样的
 this.$el.width = width;//注意没有尺寸单位
 this.$el.height = this.height;//注意没有尺寸单位

总结：

canvas 有两个尺寸：显示区域尺寸和绘图尺寸，请确保他们一样；

HTML 画布

上一篇：canvas不懂?看这篇文章就够了
下一篇：JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs

canvas:你会设置它的绘图尺寸和显示尺寸吗?

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿