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

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

javascript jquery

Javascript 如何让这样的代码在JsFiddle.net中运行？,javascript,jquery,jsfiddle,Javascript,Jquery,Jsfiddle,我正在查看如何仅使用JavaScript绘制形状的示例代码。我试图在JSFiddle.net中测试这个示例代码，虽然点击“Run”不会产生任何错误，但结果是完全空白的有人知道如何在JsFiddle.net中使某些东西真正出现在屏幕上吗 draw = function() { //sky background(172, 238, 247); //ground fill(95, 156, 83); rect(0, 350, 400, 50); }; dra

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

有人知道如何在JsFiddle.net中使某些东西真正出现在屏幕上吗

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

链接到非工作小提琴：

因此javascript与HTML一起绘制东西的方式是通过Canvas API。首先，您必须上下文化，并在JS代码和

元素之间建立交互。这是通过内置函数完成的，然后通过一点代码来简化它

<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>

您必须找到他的函数声明，或者编写自己的（或者只使用原始画布函数）以这种方式使用javascript。您还需要定义一个带有ID的canvas元素。幸运的是，我正在制作一个适合您的JSFiddle，因为您似乎对整个HTML5/JS都很陌生

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

这是您的fiddle链接朋友，我添加了一些注释以帮助您理解所有内容

，因为您没有标记：）

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)