javascript - 使用 JS 创建与嵌入 HTML 时，HTML Canvas 坐标不同-6ren

javascript - 使用 JS 创建与嵌入 HTML 时，HTML Canvas 坐标不同

转载作者：太空狗更新时间：2023-10-29 16:35:49

28

4

使用 HTML5 canvas 和 JS，当直接将 Canvas 添加到 HTML 正文而不是使用 JS 创建 Canvas 时，我发现了一种奇怪的行为。

<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="test" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<script>
    var c=document.getElementById("test");
    ctx=c.getContext("2d");
    ctx.fillStyle = "#9ea7b8";
    ctx.fill();
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke(); 

    // creating canvas using JS
    c = document.createElement("canvas");
    c.id="MyCanvas";
    c.style.width="200px";
    c.style.height="200px";
    c.style.border="1px solid #000000";
    ctx=c.getContext("2d");
    ctx.fillStyle = "#9ea7b8";
    ctx.fill();
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();
    document.body.appendChild(c);
</script>
</body>
</html>

请查看代码和输出 here

我希望线条(描边)在 Canvas 上是一条一致的对 Angular 线，但唉!请帮助我知道我哪里出错了!

注意:我忘了说，我只是在 Chrome 上试过这个，但不确定其他浏览器的行为是否一致。

最佳答案

所以，基本上，如果您从样式更改为属性，它就会起作用。

为什么？

It seems that the width and height attributes determine the width or height of the canvas's coordinate system, whereas the CSS properties just determine the size of the box in which it will be shown.

Source

像这样它会很好地工作:

        var c = document.getElementById("test");
        ctx = c.getContext("2d");
        ctx.fillStyle = "#9ea7b8";
        ctx.fill();
        ctx.moveTo(0, 0);
        ctx.lineTo(200, 200);
        ctx.stroke();

        // creating canvas using JS
        c = document.createElement("canvas");
        c.id = "MyCanvas";
        c.setAttribute("width", "200px")
         c.setAttribute("height", "200px")
         c.style.border = "1px solid #000000";
        ctx = c.getContext("2d");
        ctx.fillStyle = "#9ea7b8";
        ctx.fill();
        ctx.moveTo(0, 0);
        ctx.lineTo(200, 200);
        ctx.stroke();
        document.body.appendChild(c);

<canvas id="test" width="200" height="200" style="border:1px solid #000000;"></canvas>

关于javascript - 使用 JS 创建与嵌入 HTML 时，HTML Canvas 坐标不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30397395/

28

4

0

文章推荐： html - WKHTMLTOPDF 仅将第一页生成为 PDF

文章推荐： c - C 低级编程的替代品？

文章推荐： android - fragment 中的 getLayoutInflater()

文章推荐： c - 全局变量性能效果(c、c++)

python - 给定 X 坐标，如何计算一个点的 Y 坐标，使其位于贝塞尔曲线上
我有一个点(粉色圆圈)，它有一个已知的 X 坐标和一个已知的 Y 坐标，但 Y 坐标> 坐标不正确。它当前位于目标贝塞尔曲线(部分位于白色正方形中的曲线)所在的点(如果它是两点之间的一条线)。我需要为
c++ - 如何根据 X 坐标(QWT)获取绘图曲线的 Y 坐标？
有一个基于QML 和QWT 的代码，一种具有更多可能性的图形生成器。技术要求之一是根据某个 X 坐标获得绘图曲线的 Y 坐标。有一种不准确的方法 - 获取 QwtPlotCurve 的 QPoint
java - 如何停止 3D 转换为 2D 坐标，在另一侧创建 "ghost"坐标？
我目前正在将对象的 3D 坐标转换为 2D 坐标，然后在其上绘制 2D 文本(目前是对象名称): public static int[] getScreenCoords(double x, doubl
python - 使用 pyplot.scatter() 方法绘制元组列表(x 坐标、y 坐标、颜色)
首先，我创建一个元组列表(要绘制的点)。每个元组由 3 个数字组成(x - 坐标，y - 坐标，c - 点的颜色) import random import matplotlib.pyplot as
Java 坐标
我正在制作一个 2 人 Java 游戏，但我需要确保坐标保留在板上。 addPiece(1, 1, "X"); addPiece(8, 8, "O"); showBoard(); Scanner my
Python最近邻——坐标
我想检查我是否正确使用了 scipy 的 KD 树，因为它看起来比简单的暴力破解要慢。关于这个我有三个问题: Q1. 如果我创建以下测试数据: nplen = 1000000 # WGS84 lat
geolocation - GeoJSON 坐标？
我有一个 GeoJSON 文件，我正在尝试处理它以便在谷歌地图上绘制一些功能。然而，问题在于坐标不是传统的纬度/经度表示法，而是一些大的六位/七位数字。示例: { "type":
java - 坐标(数组列表)
我在使用坐标时遇到格式化问题。 public class Coordinate { public int x; public int y; public Coordinate( int x
java - 在android中获取当前位置(坐标)？
我正在尝试获取当前位置的经度和纬度坐标。这是到目前为止我的代码: public class MainActivity extends AppCompatActivity { @Override pro
贝塞尔曲线的 OpenGL 坐标
基本上，我需要获取从 OpenGL 中的贝塞尔曲线实现绘制的所有坐标。具体来说，我需要坐标来沿着弯曲的轨迹路径移动场景中的球体对象(棒球)。这是我用来绘制曲线的: GL2 gl = drawable.
java - 数学、坐标
现在我用 JAVA 遇到了一些问题，但不记得如何获取坐标系之间的长度。例如。A 点 (3,7)B点(7,59) 我想知道如何计算a点和b点之间的距离。非常感谢您的回答。 :-) 最佳答案 A = (
python - Tkinter - 坐标
我正在用 Pi2Go 机器人制作一个小项目，它将从超声波传感器获取数据，然后如果它看到一个物体，则放置一个 X，并放置 O 它当前所在的位置，我有两个问题:如何在 tkinter 上设置坐标位置？例如
python - 如何在pygame中存储对象先前的x位置(坐标)？
如何在 pygame 中存储对象的先前坐标？我的问题可能有点难以解释，但我会尽力，如果您自己尝试我的代码以理解我的意思可能会有所帮助。这就是我的游戏的内容。我希望这能让我的问题更容易理解。我正在创
ios - 获取用户当前位置/坐标
如何存储用户的当前位置并在 map 上显示该位置？我能够在 map 上显示预定义的坐标，只是不知道如何从设备接收信息。此外，我知道我必须将一些项目添加到 Plist 中。我怎样才能做到这一点？最
java - 缩放图像并将其放置在Android的LinearLayout中的特定位置(坐标)
我在 android 应用程序开发方面不是很熟练，我正在开发一个测试应用程序。我检测到了脸和眼睛，现在我要根据眼睛的坐标在脸上画一些像粉刺或疤痕的东西(例如脸颊上的眼睛下方)。稍后，我会把眼镜或帽子放
android - 人脸检测API-坐标
所以我正在使用 API 来检测图像中的人脸，到目前为止它对我来说效果很好。然而，我一直无法弄清楚如何将图像裁剪到脸上。我知道如何裁剪位图，但它需要获取位图中脸部的左上角位置以及宽度和高度。当我使用查
sql - 计算位于边界框内的点/坐标
我有 2 个表。第一个表包含以下列:Start_latitude、start_longitude、end_latitude、end_longitude、sum。 sum 列为空，需要根据第二张表进行填
ios - 获取指定城镇的随机地址/坐标
有没有办法给 Google Maps API 或类似的 API 一个城镇名称，并让它返回城镇内的随机地址？我希望能够将数据作为 JSON 获取，以便我可以在 XCode 中使用 SwiftyJSON
Python - 获取线的周边区域(坐标)
我将坐标保存在 numpy 数组 x 和 y 中。现在我想要的只是获得一个多边形(分别是点数组)，它用给定的宽度参数定义周围区域。我遇到的问题是我需要一个没有(!)交叉点的多边形。但是，当曲线很窄时
按下按钮的 Swift 坐标
我正在开发井字游戏 (3x3)，所以我有 9 个按钮，我想做的是获取用户按下的按钮的坐标，并在按钮的位置插入图像。例子: @IBOutlet weak var button1Outlet: UIBu

首页

博学

6Ren·AI

商城

javascript - 使用 JS 创建与嵌入 HTML 时，HTML Canvas 坐标不同