Canvas动态改变宽高解决拉伸问题

最新推荐文章于 2024-06-27 15:04:50 发布
最新推荐文章于 2024-06-27 15:04:50 发布
阅读量2.5k 收藏 9
点赞数 1
分类专栏： 前端开发相关 文章标签： canvas css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hoaxxcj/article/details/117022591
版权

之前开发模型渲染功能时，有一个特效是通过给目标canvas添加、修改filter属性实现。当时我发现一个问题：仅仅添加、修改filter一个属性后，canvas内容会被拉伸，导致滚动条出现（如下图，外层div宽高为337.5*745，但内层canvas宽高却为1012*2235），就算添加固定高度也没效果。昨天处理移动端适配，发现这个问题在移动端影响更大。最终我是通过动态改变canvas宽高完美解决了此问题。

首先使用window.getComputedStyle（）方法获取canvas父级容器宽高；然后连着“display：block；"一起赋给canvas；这时canvas宽高就是我们动态赋予的值，大小合适，不会拉伸溢出！

hoaxxcj
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas 宽高问题
XXHolic
06-24 549
引子 在最近的工作中碰到了合成图片的需求，首先想到的便是 canvas，到网上查找了一些资料，大部分也是使用 canvas。因为好久没有实际接触过这方面的东西了，感觉到一些兴奋。预估会收获不少。 Origin My GitHub 宽高问题 因为是在手机上，需要进行不同尺寸的适配，在项目中使用的是 rem 单位，想着既然拥有全局属性 width 和 height，那么理论上应该支持。进行了下面的尝试。 html 标签属性设置 这是示例，扫描二维码访问如下。 发现这个想法不对，后来看规范中的描述，发现描述
关于canvas在移动端适配的问题，主要解决宽高拉伸的问题（vue3的写法）
m0_68492325的博客
11-03 1607
关于canvas在移动端适配的问题，主要解决宽高拉伸的问题（vue3的写法）
如何用canvas实现fabricjs(图层、拖拽、旋转、拉伸)功能
最新发布
sinat_37066308的博客
06-27 1306
本文介绍fabricjs的部分功能（拖拽，图层，选择，缩放，旋转等）的实现思路，水平有限仅供参考。 项目git仓库 ： github.com/pengzhijian… 在最底部也有所有效果的完整代码，有需要的自取。
动态设置canvas宽高
热门推荐
DDDEBOKE
12-18 1万+
       在js中设置canvas的宽高时，如果用css()函数设置，或者在css样式中设置时，在绘制图像时就会出现拉伸变形的情况。这是 因为canvas的默认宽高为300px*150px，在css中设置canvas的宽高，实际上是把canvas在300px*150px的基础上进行了拉伸。所 以绘制出来的图像会发生变形。        因此，如果要动态改变canvas的大小，用以下的方式...
canvas动态设置宽高
notagoodwriter的博客
01-22 1874
的默认宽高为 宽 3高如果在里修改宽高 相当于对做放大 而为了不影响效果 我们正常显示需要怎么办呢？
动态的设置cavas的宽高
qq_36309066的博客
12-05 763
1：在js中设置canvas的宽高 注意：在js中设置canvas的宽高时，如果设置方式不正确，或者在cass中设置时，在绘制图像时就会出现拉伸的情况。这是因为canvas的默认宽高为300px*150px，在css中设置canvas的宽高，实际上是把canvas在300px*150px的基础上进行了拉伸。所以绘制出来的图像会发生变形。 在js中设置canvas的宽高时应当
canvas 动态设置宽高问题 (apicloud)
weixin_30301183的博客
02-28 491
1 apiready = function() { 2 var winWidth = api.winWidth; 3 var winHeight = api.winHeight; 4 console.log(winHeight); 5 var canvasList = document.getElementById('leftjoystick'...
ios微信小程序canvas动态给宽高的bug
qq_39730030的博客
07-03 2187
最近在用小程序新版canvas写分享海报的时候，发现ios有bug。 刚开始把canvas的宽高直接写死，测试是没问题的。 <canvas type="2d" id="shareImg" style="width: 530rpx; height: 943rpx;" ></canvas> 后来新增了个页面，也要用到分享海报，并且图片尺寸的比例不一样了，我就尝试将之前的分享海报封装成组件。内部就不展示了，宽度改成动态传入，高度也跟随改动。 <canvas
【JavaScript实战经验】canvas画布出现高是宽的两倍，以及宽高不正确问题的处理（方法探索历程）
Ice__Clean的博客
02-12 1346
canvas画布出现高是宽的两倍，是由HTML和CSS设置不统一导致画布拉伸而出现的状况，统一一下就好啦~
canvas的使用
01-08
在移动端开发中，canvas元素的自适应是非常关键的，因为直接使用CSS设置canvas的宽高可能导致填充的内容被拉伸，影响显示效果。要避免这个问题，应该尽量避免通过CSS控制canvas的尺寸，而应直接设置canvas元素的内在...
Canvas绘制高清图片与解决模糊问题
本章将首先简要介绍高清图片在Web应用中的重要性，然后深入讲解Canvas绘制图片的基本原理。 ## 简介高清图片的重要性和在Web应用中的应用 在当今的Web应用中，高清图片已经成为用户体验的重要组成部分。随着高清...
javascript设置canvas宽高
dragoo1的专栏
06-16 9604
环境：win7 32位,ie11 转自：http://shibingwei.diandian.com/post/2012-06-13/40028709329 画布Canvas自适应浏览器窗口调整宽高 让画布自适应浏览器窗口调整宽高可以利用window对象的onresize事件属性，当浏览器窗口发生大小调整时会触发此事件。注意在css样式中应当清除外边距和内边距的浏览器默认样式，同时将
canvas改变宽高后发生了什么？
harmsworth的博客
07-03 1164
canvas改变宽高后发生了什么？前言代码总结 前言 在 canvas 画布中，需要设置固定的宽高，如果宽度或高度改变了，canvas 画布会发生什么变化呢？实际情况如下图所示： 或者您可以点击这里：canvas改变宽高后发生了什么？ 可以看出，改变 canvas 宽高后，发生了以下变化： 画布内容被清空 画出的线条颜色变成了黑色 画出线条变细了 所有的这些变化都说明了一种可能，canvas 的上下文属性重置为默认值了。 代码 <!DOCTYPE html> <html lang="
动态宽高canvas img
你当像鸟飞往你的山~~
01-06 571
作者：LoveEmperor-王子様 html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> canvas id="myCanvas" style="border:1px solid #000000;"> canvas> body> script> // var
使用canvas画布时内容或画布被拉伸的原因和解决方法
qq_42318977的博客
12-02 3107
转载于：https://blog.csdn.net/baidu_33866132/article/details/76569124 原因：canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。 解决方法：所以，在canvas绘图时，应该在canvas标签里直接定义宽高。.
图片 视频和Canvas的相互转换 动态控制canvas图片的大小和解决模糊问题
Noctis99的博客
09-20 1422
c
【备忘笔记】three界面 canvas画布宽高度动态变化
Thea12138的博客
10-08 385
canvas画布宽高度动态变化,需要更新相机和渲染的参数，否则无法正常渲染。
canvas画图时，图形被拉伸问题
lixianhaics的博客
06-18 9482
刚开始学习canvas，在画正方形时，使用了样式控制canvas的大小。但画出来的图形被拉伸了，严重变形。<!doctype html> <html> <head> <meta charset='UTF-8'> <meta name='renderer' content='webkit'> <meta http-equiv='X-UA-Comp
canvas 宽度和高度
qq_42816270的博客
01-27 777
canvas 的宽高不需要设置单位
canvas动态修改宽高问题
05-27
要动态修改`canvas`的宽高，可以通过以下步骤实现： 1. 获取`canvas`元素 ``` var canvas = document.getElementById('my-canvas'); ``` 2. 修改`canvas`的宽高属性 ``` canvas.width = newWidth; canvas.height = newHeight; ``` 3. 清空画布重新绘制 ``` var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制新的内容 ``` 注意，修改`canvas`的宽高属性会导致画布被清空，因此需要重新绘制内容。同时，修改`canvas`的宽高属性会导致画布大小发生变化，因此需要根据实际需求重新计算绘制内容的位置和大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值