Рисование на холсте не происходит в javascript

Я пытаюсь создать холст из склеек и прямоугольников, которые появляются случайным образом, количество которых является выбором пользователя. после того, как они вводят цифры их окружения, нажмите кнопку - она должна появиться на холсте. в моем коде это не происходит, и я не могу понять, почему! что делает меня сумасшедшим здесь. Я, очевидно, пропустил что-то здесь, и я думаю, что это очень глупо.Рисование на холсте не происходит в javascript

function draw() { 
 
    var drawing = document.getElementById("canvas"); 
 
    var context = drawing.getContext("2d"); 
 
    saveImage(); 
 
} 
 

 

 
//save the user input to use it later 
 
var numOfRect = parseInt(document.getElementById("inSquer").value); 
 
var numOfCirc = parseInt(document.getElementById("inCircle").value); 
 

 

 
//This function will draw on the canvas 
 
function paint(numOfRect, numOfCirc) { 
 
    for (var makeIt = 0; makeIt < numOfRect; makeIt++) { 
 
    makeRect(drawing, context); 
 
    makeCircle(drawing, context); 
 
    } 
 
} 
 

 

 
//This function draw the circles 
 
function makeCircle(drawing, context) { 
 
    var radius = Math.floor(Math.random() * 80); 
 
    var x = Math.floor(Math.random() * canvas.width); 
 
    var y = Math.floor(Math.random() * canvas.height); 
 

 
    context.beginPath(); 
 
    context.arc(x, y, radius, 0, 2 * Math.PI); 
 
    context.fillStyle = "blue"; 
 
    context.fill(); 
 
} 
 

 

 
//This function draw the squers 
 
function makeRect(drawing, context) { 
 

 
    var w = Math.floor(Math.random() * 50); 
 

 
    var x = Math.floor(Math.random() * canvas.width); 
 
    var y = Math.floor(Math.random() * canvas.height); 
 
    context.fillStyle = "yellow"; 
 
    context.fillRect(x, y, w, w); 
 
} 
 

 
//function to save the canvas as an image 
 
function saveImage() { 
 
    var canvas = document.getElementById("canvas"); 
 
    canvas.onclick = function() { 
 
    window.location = canvas.toDataURL("image/png"); 
 
    }; 
 
}

#canvas { 
 
    margin-left: 150px; 
 
    border: 1px solid black; 
 
}

<html> 
 

 
<head> 
 
    <script src="js.js"> 
 
    </script> 
 
    <link href="design.css" rel="stylesheet" /> 
 
</head> 
 

 
<body onload="draw()"> 
 

 
    <canvas id="canvas" width="1200" height="750"></canvas> 
 
    </br> 
 
    </br> 
 
    <span> 
 
    How many Circles do you want? 
 
    <input id="inCircle"></input> 
 
    </span> 
 
    </br> 
 
    How many Squers do you want? 
 
    <input id="inSquer"></input> 
 
    </br> 
 

 
    <button id="creat" onclick="paint()">Creat My Work</button> 
 

 
</body> 
 

 
</html>

источник

2015-12-15 Anonymous

paint(numOfRect, numOfCirc) хочет 2 параметра, но <button id="creat" onclick="paint()">Creat My Work</button> не дает никаких.

Также

var numOfRect = parseInt(document.getElementById("inSquer").value); 
var numOfCirc = parseInt(document.getElementById("inCircle").value);

точно не делать ничего, так как значения пусты, когда работает этот код.

Попробуйте изменить функцию краски следующим образом:

function paint() 
{ 

    var numOfRect = parseInt(document.getElementById("inSquer").value); 
    var numOfCirc = parseInt(document.getElementById("inCircle").value); 

    for (var makeIt = 0; makeIt < numOfRect; makeIt++) 
    { 
     makeRect(drawing, context); 
     makeCircle(drawing, context); 
    } 
}

источник

2015-12-15 10:41:12 Piwwoli

Это ничего не сделал. такой же результат. –

Эта часть не единственная вещь, сломанная вашим кодом. Я пытаюсь уговорить вас в правильном направлении, а не делать вашу работу. – Piwwoli

Не нужно быть придуркой @Piwwoli, также неправильно отправить ответ, чтобы ответить только на часть вопроса в этом случае. – PourMeSomeCode

Пожалуйста, обратите внимание на следующий фрагмент кода.

Прежде всего, в вашей функции paint() отсутствовали два аргумента. Кроме того, я бы рекомендовал определить все переменные поверх вашего скрипта, поэтому его легче отслеживать.

Я добавил несколько комментариев в код, чтобы выделить изменения.

Также я удалил несколько избыточных взаимодействий DOM.

// Wait for DOM to be loaded. 
 
document.addEventListener("DOMContentLoaded", function(event) { 
 
    
 
    // Keep references to elements, so we could interact with them later. 
 
    var drawing = document.getElementById("canvas"); 
 
    var context = drawing.getContext("2d"); 
 
    var inSquer = document.getElementById("inSquer"); 
 
    var inCircle = document.getElementById("inCircle"); 
 
    var button = document.getElementById("creat"); 
 

 
    // Attach event listeners to the button and canvas element. 
 
    button.addEventListener("click", function() { 
 

 
    // Retrieve values from input fields every time you click. 
 
    paint(parseInt(inSquer.value), parseInt(inCircle.value)); 
 
    }); 
 

 
    drawing.addEventListener("click", function() { 
 
    saveImage(); 
 
    }); 
 

 
    // Function to save the canvas as an image. 
 
    function saveImage() { 
 
    window.location = drawing.toDataURL("image/png"); 
 
    } 
 

 
    // This function will draw on the canvas. 
 
    function paint(numOfRect, numOfCirc) { 
 

 
    for (var makeIt = 0; makeIt < numOfRect; makeIt++) { 
 
     makeRect(drawing, context); 
 
     makeCircle(drawing, context); 
 
    } 
 
    } 
 

 
    // This function draw the circles. 
 
    function makeCircle(drawing, context) { 
 

 
    var radius = Math.floor(Math.random() * 80); 
 
    var x = Math.floor(Math.random() * canvas.width); 
 
    var y = Math.floor(Math.random() * canvas.height); 
 

 
    context.beginPath(); 
 
    context.arc(x, y, radius, 0, 2 * Math.PI); 
 
    context.fillStyle = "blue"; 
 
    context.fill(); 
 
    } 
 

 
    // This function draw the squers. 
 
    function makeRect(drawing, context) { 
 

 
    var w = Math.floor(Math.random() * 50); 
 
    var x = Math.floor(Math.random() * canvas.width); 
 
    var y = Math.floor(Math.random() * canvas.height); 
 

 
    context.fillStyle = "yellow"; 
 
    context.fillRect(x, y, w, w); 
 
    } 
 
});

#canvas { 
 
    margin-left: 150px; 
 
    border: 1px solid black; 
 
}

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <canvas id="canvas" width="1200" height="750"></canvas> 
 
    <br/> 
 
    <br/> 
 
    <span> 
 
    How many Circles do you want? 
 
    <input id="inCircle" /> 
 
    </span> 
 
    <br/>How many Squers do you want? 
 
    <input id="inSquer" /> 
 
    <br/> 
 
    <button id="creat">Creat My Work</button> 
 
</body> 
 

 
</html>

источник

2015-12-15 10:44:38 halfzebra

Im следя за тем, что вы здесь написали, и я могу понять, что вы сделали. ive попытался просто скопировать и пропустить ваш код, чтобы увидеть, как он работает на моем компьютере, но он не работает/работает. но когда я нажимаю «фрагмент кода запуска» на этом сайте, он делает это. вы можете сказать мне, почему ваш код не будет работать на моем компьютере? (im работает в блокноте ++). –

@GabrielMichaeli Скорее всего, вы впрыскиваете скрипт в '', это willl не будет работать так. Я обновил сценарий с помощью прослушивателя событий «DOMContentLoaded», поэтому он будет ждать загрузки DOM, иначе вы можете попробовать использовать событие «load». – halfzebra

Я вижу. О, мужик ... Я не знаю, как это использовать. Не могли бы вы рассказать мне, как запустить его обычным образом в ? Я был бы очень признателен. –

Рисование на холсте не происходит в javascript

ответ

Смежные вопросы