Как получить такой код для запуска в JsFiddle. net? - PullRequest
Новая
       27

Как получить такой код для запуска в JsFiddle. net?

2 голосов
/ 05 апреля 2020

Я смотрю пример кода о том, как рисовать фигуры, используя только JavaScript. Я пытаюсь протестировать этот пример кода в JSFiddle. net, и хотя нажатие клавиши «Выполнить» не приводит к ошибкам, результат полностью пустой.

Кто-нибудь знает, как заставить что-то действительно появляться на экране в JsFiddle. net? 

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

Ссылка на нерабочую скрипку: https://jsfiddle.net/skdopL1b/

1 Ответ

1 голос
/ 05 апреля 2020

Таким образом, javascript работает с HTML для рисования вещей через API Canvas. Сначала вам нужно контекстуализировать и установить sh взаимодействие между 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 Похоже, вы, вероятно, скопировали функции из видео которые заранее установили эти функции, так как они не являются обычной функцией 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)

Вам нужно будет либо найти объявления его функций, либо написать свои собственные (или просто использовать функции raw canvas) для работы с javascript таким образом. Вам также нужно определить элемент canvas с идентификатором. К счастью для вас, я работаю над созданием JSFiddle, который подойдет вам, поскольку вы, кажется, довольно новичок во всей этой HTML5 / JS вещи.

------- РЕДАКТИРОВАТЬ -------

Вот твой друг по скрипке, я добавил комментарии, чтобы помочь тебе понять все https://jsfiddle.net/xwqg1cez/2/

...