在javascript中居中可交互画布答案

【问题标题】：Centering interactable canvas in javascript在javascript中居中可交互画布
【发布时间】：2022-01-03 20:10:45
【问题描述】：

我有以下代码：

    function up(e) {
        if(e.target.id === 'appCanvas') {
            // add circle at cursor coords
        }
    }

    canvas {
       padding: 0;
       margin: auto;
       display: block;
       width: 80%;
       height: 80%;
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
    }

    <html>
    <head>
        <meta charset="utf-8">
        <title>Graphs</title>
        <link rel="stylesheet" href="index.css">
        <script type="module" src="application.js"></script>
    </head>

    <body>
        <div>
            <canvas id="appCanvas" style="border:5px solid #000000;"></canvas>
        </div>
    </body>
    </html>

这将创建一个位于页面中心的 html 画布，其宽度和高度为内页的 80%。然而，在 javascript 方面，它并没有在确切的坐标处添加一个圆圈，而是将画布高度和宽度的 20% 移动。

我要怎么做才能只与 80% 的画布交互，并在画布上精确地创建圆圈？

【问题讨论】：

显示添加圆圈的代码。
画布坐标与视图坐标不同。鼠标位置在视图坐标中给出，画布绘制在画布坐标中完成。

标签： javascript html css canvas

【解决方案1】：

在画布上使用点击事件。使用事件中的 clientx 和 clienty 方法使用 arc 函数创建圆圈，然后使用 stroke/fill 函数显示圆圈

我得到了 w3 学校https://www.w3schools.com/tags/canvas_arc.asp

这是我写的一些代码

const canvas = document.querySelector("#appCanvas");

canvas.addEventListener("click", circle);

function circle(e){
var ctx = canvas.getContext('2d');
ctx.arc(e.clientX,e.clientY,2, 0,2*Math.PI);
ctx.stroke(); 
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。