javascript - 如何让这样的代码在 JsFiddle.net 中运行？-6ren

javascript - 如何让这样的代码在 JsFiddle.net 中运行？

转载作者：行者123 更新时间：2023-12-01 04:33:15

我正在查看有关如何仅使用 JavaScript 绘制形状的示例代码。我尝试在 JSFiddle.net 中测试此示例代码，虽然点击“运行”不会产生任何错误，但结果完全是空白。

有人知道如何让 JsFiddle.net 中的某些内容实际出现在屏幕上吗？

draw = function() {
    //sky
    background(172, 238, 247);
    //ground
    fill(95, 156, 83);
    rect(0, 350, 400, 50);
};
draw();

链接到非工作 fiddle : https://jsfiddle.net/skdopL1b/

最佳答案

因此，javascript 与 HTML 一起绘制内容的方式是通过 Canvas API。首先，您必须上下文化并建立 JS 代码和 <canvas> 之间的交互。元素。这是通过内置函数和一些代码来简化它来完成的。

<html>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
const c = document.getElementById("canvas"); //Grab canvas element to use as object
const ctx = c.getContext('2d'); //Function that enable the 2d functions of Canvas API
ctx.fillRect(0,0,10,10) //Example of ctx function
<script>
</html>

从您提供给我们的 JS Fiddle 来看，您可能从预先建立这些函数的视频中复制了函数，因为它们不是普通的 Canvas 函数，而是自定义函数。我可以向您展示如何编写这些自定义函数之一的示例

function background(red,green,blue) {
    ctx.fillStyle = 'rgb('+red+','+green+','+blue+')';;
    ctx.fillRect(0,0,c.width,c.height); //Makes a rectangle the size of the canvas
}
background(172,238,247); //Creates a canvas sized rectangle with rgb(172,238,247)

您必须找到他的函数声明或编写自己的函数声明(或仅使用原始 Canvas 函数)才能以这种方式使用 javascript。您还需要定义一个带有 ID 的 Canvas 元素。幸运的是，我正在努力制作一个适合您的 JSFiddle，因为您似乎对整个 HTML5/JS 事物相当陌生。

--------编辑--------

这是你的 fiddle 链接 friend ，我添加了评论来帮助你理解一切https://jsfiddle.net/xwqg1cez/2/

关于javascript - 如何让这样的代码在 JsFiddle.net 中运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61037262/