canvas 元素的 offsetWidth

hzc 发布于2019-08-01 15:58 / 737人阅读

摘要：正在做的一个项目用到了，根据元素的样式大小动态设置元素的和。但是发现元素的似乎已经是占位大小再乘以了。再次验证，代码如下开发用的是，这台电脑是屏，是，发现在和中，都显示等项目上线，再回头详细研究这个问题。

正在做的一个项目用到了canvas，根据 canvas 元素的样式大小、window.devicePixelRatio
动态设置 canvas 元素的 width 和 height 。

但是发现 canvas 元素的 offsetWidth 似乎已经是 CSS 占位大小再乘以 window.devicePixelRatio 了。
再次验证，代码如下：

body {
    margin: 0;
}
.canvas-container {
  width: 500px;
  height: 500px;
  margin: 100px auto;
  background: rgba(0, 0, 0, 0.3);
}
canvas {
    display: block;
    height: 100%;
}

document.querySelector("#text").innerHTML = document.querySelector(".canvas-container").offsetWidth + " " + document.querySelector("canvas").offsetWidth;

开发用的是MBP，这台电脑是retina 屏，window.devicePixelRatio 是 2，
发现在 chrome 和 safari 中，都显示 500 1000

等项目上线，再回头详细研究这个问题。

私有云服务器托管 offsetWidth html5的canvas 元素的样式 Canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50236.html

Canvas 实现炫丽的粒子运动效果（粒子生成文字）

摘要：代码实现炫丽的粒子运动效果云库前端散开类型归位随机散开效果对归位有效输入汉字后回车代码不多，只要是几个操作元素。看起来运行顺畅的代码也或多或少有一些瑕疵，日前这个效果还只支持中文。没有最好，只有更好，如题所示，这篇文章只要是分享一个用 Canvas 来实现的粒子运动效果。感觉有点标题党了，但换个角度，勉勉强强算是炫丽吧，虽然色彩上与炫丽无关，但运动效果上还是算得上有点点炫的。不管怎么...

icattlecoder 2019-08-26 11:33 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

zhaochunqi 2019-08-01 17:43 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

GHOST_349178 2019-08-21 16:51 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

Galence 2019-08-30 15:53 评论0 收藏0