草庐IT

javascript - HTML5 canvas 是否支持基于浏览器的缩放？

coder 2023-08-01 原文

我设置了一个简单的 Canvas ，上面绘制了一个 fillText。它看起来相当不错，但是当我使用浏览器提供的缩放功能(Safari、Firefox)时，抗锯齿看起来很难看。

我尝试使用 scale() 提高网格，但没有帮助。

有没有办法在 Canvas 上绘制即使在缩放的浏览器窗口下也看起来清晰的 Canvas ？

屏幕截图(无缩放):http://i.stack.imgur.com/CGWka.png

屏幕截图(最大缩放):http://i.stack.imgur.com/vNPjF.png

最佳答案

您可以通过在绘制命令之前缩放 Canvas 上下文来“缩放” Canvas ，从而以更大的尺寸顺利绘制元素。例如，参见 this example of mine这使您可以放大绘制元素并查看默认演示中不可用的详细信息。

浏览器缩放的问题在于 HTML5 Canvas (与 JPG 或 PNG 不同，与 SVG 不同)是基于单个像素的。如果您以 10 像素绘制一个圆，然后告诉浏览器将其缩放到 50 像素，则浏览器无法“发明”数据来绘制平滑的圆。它能做的最好的事情就是提供图像插值，试图让“大像素”看起来稍微平滑一些。

解决方案

对于图像，您可以拍摄具有很多像素(例如 1000x800)的照片，并告诉浏览器以不同的较小尺寸(例如 250x200)显示它。当浏览器放大时， 可以显示更多像素。例如:

<img src="1000x800.jpg" style="width:250px; height:200px">

您可以对 Canvas 执行相同的操作。 Canvas 中data 的像素数由height 和width 属性(在HTML 或JavaScript 中)指定。您可以单独将 CSS 显示大小(如上)指定为较小的尺寸。您甚至不需要修改现有的 Canvas 绘图代码；简单地:

  1. 根据特定因素(例如 4)调整 Canvas 的高度和宽度，
  2. 使用CSS将显示高度和宽度设置回原来的大小，然后
  3. 在所有其他绘图命令之前，使用 ctx.scale(4,4) 放大您的上下文。

编辑:我在这里创建了一个示例:
http://jsfiddle.net/u5QPq/embedded/result/ ( code )

这是放大后的样子:

作为额外的好处，您的 Canvas 还将打印更顺畅(以防有人砍伐树木)。

关于javascript - HTML5 canvas 是否支持基于浏览器的缩放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8200792/

javascriptcanvascodesectioncsshtml

有关javascript - HTML5 canvas 是否支持基于浏览器的缩放？的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  6. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

  7. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  8. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/

  9. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  10. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

随机推荐