个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这个问题在这里已经有了答案:
Canvas is stretched when using CSS but normal with "width" / "height" properties
(9 个回答)
2年前关闭。
我正在按照一个教程来学习 Canvas ，而且我很早就被困住了。
这是代码:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.lineWidth = 3;
context.strokeStyle = "blue";
context.lineJoin = "square";
context.strokeRect(10,10,200,200);#canvas{
border: 1px solid black;
display: block;
width: 900px;
height: 600px;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Canvas</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js" type="text/javascript"></script>
</body>
</html>最佳答案
height和 width最初应该在 HTML 或通过 DOM 属性而不是 CSS 中设置 Canvas 的大小，以避免调整大小。
来自 MDN :
Indeed, the element has only two attributes,
widthandheight. These are both optional and can also be set using DOM properties. When nowidthandheightattributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.lineWidth = 3;
context.strokeStyle = "blue";
context.lineJoin = "square";
context.strokeRect(10,10,200,200);#canvas{
border: 1px solid black;
display: block;
margin: 0 auto;
}<canvas id="canvas" height="600" width="900"></canvas>关于javascript - 谁能告诉我为什么这不是创建一个正方形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59582490/
25
4
0
为了遵循务实的编程原则，我试图根据“告诉，不要询问”原则来决定如何处理用户密码更改。 我有一个用户对象，其密码每 30 天过期一次。如果密码过期，我需要能够显示密码过期/更改密码 View 。询问对象
我试图在接收文件时绕过任何本地存储。根据documentation ，如果“合理”，Flask 会将文件保存在内存中，否则会将它们存储在临时位置。 我只找到了一种通常使用 MAX_CONTENT_LE
SAS 在 proc 中返回 sci-notation 意味着总和输出，我不能将其用于进一步的速率计算过程。如何抑制 SAS 产生 sci-notation，有什么想法吗？提前致谢。 “解决了一个类似
当使用 nohup 时，脚本的输出会被缓冲，只有在脚本执行完毕后才会转储到日志文件 (nohup.out) 中。以接近实时的方式查看脚本输出以了解其进展情况将非常有用。有没有办法让 nohup 在脚本
假设我们定义了以下路由: const routes: Routes = [ { path: '', component: WelcomeComponent }, {
我正在尝试以下操作: a a > 1 1 > 2 2 > 3 3 我想要的是: a b > 1 1 > 2 2 > 3 3 有没有办法告诉 R 使用存储在对象( "b" )中的字符串( a
我想在安装二进制文件之前使用 automake 处理/修改它们。例如，我想将二进制文件中的符号提取到单独的文件和位置(如 this )。另一个示例是收集关键 Assets 的 md5sum 以发布报告
我的应用程序有一个主要的 pro 文件，我想告诉 qmake 在与应用程序同时编译一个单独的库。该库的目录中还有一个 pro 文件。这可能吗？ 最佳答案 将 lib 和应用程序放在单独的子目录中，并使
我的 vimrc 中有以下内容: nnoremap :!screen -S foo -p run -X stuff '!!^M' 但是，当单击 F1 时，出现错误:没有上一个命令。 我想要的
我正在使用 Swagger 和 Scala 来记录我的 REST API。我想为 POST、PUT 和 DELETE 启用批量操作，并希望相同的路由接受单个对象或对象集合作为正文内容。 有没有办法告诉
我有一个 SAS 代码，它为我的计算创建了很多中间表。事情是，我在工作完成后并不真正关心这张 table ，我只关心决赛的结果。 但是，每次我运行这段代码时，SAS 都会添加所有生成的表来做我的流程，
有没有办法告诉 UglifyJS 跳过特定的代码部分，也许使用这样的注释: // uglifyjs:skipStart filter = function(item){ /* some crazy f
在 macOS 上通过 homebrew 安装包时，如果我的网络不稳定并且一次下载失败，homebrew 将下载源并从源开始构建。这将需要很长时间和高 CPU 使用率，这是不需要的。如何在下载失败时告
有没有办法告诉 GORM 不要保留属性？我计划在我的 User 类上定义一个确认密码属性，用于验证，但不应保留。 最佳答案 使用 transient 关键字 GORM 可以指示不持久化特定属性。 以下
我正在为 jQuery 编写一个幻灯片放映应用程序(单击按钮，然后滑动浏览图像列表)，但我遇到了一个小错误，它将响应 即使在动画发生时也会发出 click() 请求。我已经在使用 animate()
我可以告诉 Xcode 4 我不在项目中使用自动布局吗？ 目前，每个新创建的 xib 都会启用自动布局，这意味着我必须在创建 xib 后手动将其关闭，而我不希望这样。 最佳答案 这是自动布局的问题。您
因此，我正在使用目前手动运行的 AzCopy，但我要通过我们的一台服务器上的任务计划程序来运行它。如果我手动执行批处理文件，这会将文件从一个容器复制到另一个容器，并且可以完美运行。然而，它问我: Ov
我正在 OSX 中编写一个基于文档的应用程序。我发现当我更改文档的内容时，应用程序不知道文档已更改。我可以在没有警告的情况下关闭文档，这会导致我未保存的内容丢失。 如何告诉 NSDocument 文档
根据NSWindow Class Reference ，您应该“很少需要调用”NSWindow 方法“display”或“setViewsNeedDisplay”。那么重新显示窗口内容的常用方法是什么
为了重写开源 iMedia 框架项目(目前有数十名开发人员正在使用)，我们正在切换到 IKImageBrowserView，并且在缓存方面遇到了麻烦。 看来 IKImageBrowserView 喜欢
我是一名优秀的程序员,十分优秀！