1
Я действительно не уверен, что в этом нет, поэтому я выложу весь код внизу.Полный холст заполняется командой заполнения
Я начал пытаться создать простую анимационную программу like this, но всякий раз, когда я пытаюсь рисовать рамку, она заполняет весь холст.
Вот код
Вы, вероятно, следует очистить игровое поле перед тестированием функции тоже.
<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Drawing</title>
\t </head>
\t <body>
\t \t <canvas id="container" width="500" height="500" style="border: 3px solid black"></canvas><br>
\t \t <button onClick="colorChange()">Change the color</button>
\t \t <button onClick="colorChange('erase')">Eraser</button>
\t \t <button onClick="colorChange('pen')">Pen</button>
\t \t <button onClick="bcClear('clear')">Clear</button>
\t \t <button onClick="bcClear()">Change Background</button><br>
\t \t Width: <input type="range" min="5" max="100" value="10" step="5" onChange="chWidth(this.value)"/> <!--New method -- this object -->
<button onClick="drawFrame()">Draw frame</button>
\t \t <script>
\t \t \t //variables for drawing
\t \t \t var width = 10, color = "black", bc="white";
\t \t \t var cel = document.getElementById("container");
\t \t \t var canvas = cel.getContext("2d");
\t \t \t var clickd = false;//if clicked
\t \t \t
\t \t \t //variables for animating
\t \t \t frame = 0;
\t \t \t frames = [[]]; //frames: [ [frame1 circles, seperate by space] [frame2] ]
\t \t \t
\t \t \t //events
\t \t \t cel.addEventListener("mousedown", function(e){clickd=true;drawSomething(e);}, false);//draw dot, make clicking true for dragging
\t \t \t cel.addEventListener("mouseup", function(e){clickd=false;}, false);//stop drawing
\t \t \t cel.addEventListener("mousemove", drawSomething, false);//\/
\t \t \t
\t \t \t //draw
\t \t \t function drawSomething(event) {
\t \t \t \t if (clickd) {//if u are dragging
\t \t \t \t \t canvas.beginPath();
\t \t \t \t \t var newX = event.clientX - cel.getBoundingClientRect().left;
\t \t \t \t \t var newY = event.clientY - cel.getBoundingClientRect().top;
\t \t \t \t \t canvas.arc(newX, newY, width, 0, 2*Math.PI);
\t \t \t \t \t canvas.fill();//make circle
\t \t \t \t \t frames[frame].push(newX + " " + newY);
\t \t \t \t }
\t \t \t }
\t \t \t
\t \t \t //clear, background color
\t \t \t function bcClear(param) {
\t \t \t \t if (confirm("This will erase everything on the board, OK?")) {
\t \t \t \t \t if (!param) {
\t \t \t \t \t \t bc = prompt("What do you want the background color to be?", "CSS colors only");
\t \t \t \t \t }
\t \t \t \t \t canvas.fillStyle = bc;
\t \t \t \t \t canvas.rect(-3, -3, cel.offsetWidth, cel.offsetHeight);
\t \t \t \t \t canvas.fill();
\t \t \t \t \t canvas.fillStyle = color;
\t \t \t \t }
\t \t \t }
\t \t \t
\t \t \t //change color
\t \t \t function colorChange(param) {
\t \t \t \t if (param == 'erase') {
\t \t \t \t \t canvas.fillStyle = bc;
\t \t \t \t } else if (param == 'pen') {
\t \t \t \t \t canvas.fillStyle = color;
\t \t \t \t } else {
\t \t \t \t \t color = prompt("What color would you like?", "CSS colors only");
\t \t \t \t \t canvas.fillStyle = color;
\t \t \t \t }
\t \t \t }
\t \t \t
\t \t \t //Change width
\t \t \t function chWidth(newWidth) {
\t \t \t \t width = newWidth;
\t \t \t }
\t \t \t
\t \t \t //draw a certain frame
\t \t \t function drawFrame() {
\t \t \t \t for (var i = 0; i < frames[frame].length; i++) {
\t \t \t \t \t var coords = frames[frame][i].split(" ");
\t \t \t \t \t console.log(coords);
\t \t \t \t \t canvas.arc(coords[0], coords[1], width, 0, 2*Math.PI);
\t \t \t \t \t canvas.fill();
\t \t \t \t }
\t \t \t }
\t \t </script>
\t </body>
</html>
Может это иметь ничего общего с тем, что вы используете 'canvas.fill'? Это звучит как команда, чтобы заполнить весь холст для меня, но я не знаком с материалами, поэтому ... –
на самом деле неважно, что это был комментарий noob. –
Не пробовал свой код вообще, но на первый взгляд вы забыли startPath в цикле drawFrame. Каждый fill() будет повторно использовать весь Путь, полученный из последнего вызова beginPath (включая ваш bc rect, если он был вызван ранее) – Kaiido