gpt4 book ai didi

javascript - 在函数或 .js 文件内绘制矩形

转载 作者:行者123 更新时间:2023-11-28 03:48:27 24 4
gpt4 key购买 nike

在使用 java 和 c++ 编码后,我开始学习 javascript,我正在尝试绘制一个矩形。如果我只是在正文中的脚本中正常编码,我可以得到一个正常的矩形来绘制,但我想让我的文件看起来整洁并且有一个函数,以防我需要在程序中调用更多矩形。我已经用谷歌搜索过,但仍然不知道如何做到这一点。

我尝试将函数放在 head 部分和我的 js 文件中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PacMan</title>

<script scr="pac.js"></script>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//function drawRect(ctx, startX, startY, width, height, color){

//ctx.beginPath();
// ctx.rect(startX,startY,width,height);
// ctx.fillStyle = color;
// ctx.closePath();

// }

</script>

</head>
<body>

<canvas id="canvas" width="1000" height="720"></canvas>

<script>

drawRect(ctx,10,10,10,10, "#FF0000");


// this works but i can not get the function to work
//var canvas = document.getElementById("canvas");
//var ctx = canvas.getContext("2d");
//ctx.beginPath();
// ctx.rect(900, 10, 50, 50);
// ctx.fillStyle = "#FF0000";
//ctx.fill();
// ctx.closePath();

</script>

</body>
</html>

这是我创建的 .js 文件,旨在使我的函数保持良好整齐的顺序,这样它们就不会弄乱我的文件

function drawRect(ctx,h1,h2,w1,w2, color){

//i tired at one point putting this into function
//var canvas = document.getElementById("myCanvas");
// var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();


}

最佳答案

如果我理解正确的话,您想创建一个绘制某些内容并可能能够在其他文件中重用它的函数吗?

这是一个模拟工作功能的工作示例 https://jsbin.com/puneseyuca/edit?html,js,output 。您还可以检查输出区域并检查 DOM 语义。

为了使其正常工作,您应该遵循一些注意事项。

  1. 输入 <script>就在</body>之前
<body>
<!-- DOM -->
// ...

<!-- Scripts -->
<script src="./path-to-your-js-file.js"></script>
</body>

大多数情况下,您需要将 <script>文件就在结束 body 标记之前。另外,由于您没有使用任何框架,因此最好完全确定 DOM 已加载,因此您可以添加以下代码:

document.addEventListener("DOMContentLoaded", function(event) {
// "DOM fully loaded and parsed"
// Insert your code here
});

这对于 JS 能够从 DOM 中选择元素非常重要,否则它们可能是未定义的。

  • 创建一个全局变量,通常是 window.anything
  • ⚠️应该避免这种情况,以避免意外的突变和错误

    我不认可这种方法,但这就是一些库通过命名空间到全局 window 来工作的方式。目的。否则,1 个文件中设置的变量的范围仅限于该文件,即无法从外部访问。

    因此,您需要声明一个函数,然后将其保存到全局对象,即
    内部,例如duck.js
    window.drawDuck = drawDuck

    注意请务必检查 javascript 文件的顺序。声明全局变量的文件应该位于使用它的文件之前。

    <小时/>总而言之,我相信您可以在没有全局变量的情况下完成您想做的事情。

    希望我回答了您的问题。

    祝你编码愉快!

    关于javascript - 在函数或 .js 文件内绘制矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48242891/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com