JsFiddle.net 中的运行如何获得这样的代码？

Question

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

有谁知道如何在 JsFiddle.net 中让某些东西真正出现在屏幕上？

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

Link 到非工作 Fiddle： https://jsfiddle.net/skdopL1b/

Answer 1

所以 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 link 朋友，我添加了评论以帮助你理解所有内容 https://jsfiddle.net/xwqg1cez/2/

JsFiddle.net 中的运行如何获得这样的代码？

How do you get code like this to run in JsFiddle.net?

javascript

jquery

jsfiddle

JsFiddle.net 中的 运行 如何获得这样的代码？

How do you get code like this to run in JsFiddle.net?

javascript

jquery

jsfiddle

JsFiddle.net 中的运行如何获得这样的代码？