Единый цвет через пиксели?

Я наткнулся на этот неожиданный результат в моем коде.Единый цвет через пиксели?

Так что я просто написал простой скрипт JavaScript для записи случайных цветов на случайные пиксели в холсте HTML5 размером 640x400. Я ожидал, что это будет действительно весело, потому что на экране будут разные цвета.

Но когда я попробовал это в трех основных браузерах, все они дали тот же результат: то, что пиктограммы были всегда одного цвета. С каждым 50 миллисекундным интервалом все они меняли цвет в унисон. Хотя это классно, это не предназначено.

Почему мой код действует таким образом?

Colors.html:

<!DOCTYPE html> 
<html> 
<head> 
<title>Colors</title> 
<meta charset="UTF-8" /> 
</head> 
<body> 
<canvas width="640" height="400" id="canvas"></canvas> 
<script src="./colors.js"></script> 
</body> 
</html>

colors.js:

document.body.style.backgroundColor = "black"; 

function $(id) 
{ 
    return document.getElementById(id); 
} 

function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

var canvas = $("canvas"), 
ctx = canvas.getContext("2d"); 

function setColor() 
{ 
    ctx.fillStyle = "rgb(" + getRandomInt(0, 256) + "," + getRandomInt(0, 256) + "," + getRandomInt(0, 256) + ")"; 
    ctx.rect(getRandomInt(1, 639), getRandomInt(1, 399), 1, 1); 
    ctx.fill(); 
} 

setInterval(setColor, 50);

источник

2015-04-16 Atu Touato

Проблема заключается в том, что вы не указываете путь, прежде чем 'заливкой()'. – hindmost

Использование rect() добавит прямоугольники в путь. Когда fill() используется все из них будут заполнены текущим fillStyle.

Изменение rect() в fillRect():

function setColor() { 
    ctx.fillStyle = "rgb(" + getRandomInt(0, 256) + "," + getRandomInt(0, 256) + "," + getRandomInt(0, 256) + ")"; 
    ctx.fillRect(getRandomInt(1, 639), getRandomInt(1, 399), 1, 1); 
}

Вы также использовали beginPath() на первой линии, но это не является необходимым с fillRect(), как он ничего не добавляет к пути. Последнее быстрее для случаев, когда стиль меняется постоянно.

document.body.style.backgroundColor = "black"; 
 

 
function $(id) 
 
{ 
 
    return document.getElementById(id); 
 
} 
 

 
function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
} 
 

 
var canvas = $("canvas"), 
 
ctx = canvas.getContext("2d"); 
 

 
    function setColor() { 
 
     ctx.fillStyle = "rgb(" + getRandomInt(0, 256) + "," + getRandomInt(0, 256) + "," + getRandomInt(0, 256) + ")"; 
 
     ctx.fillRect(getRandomInt(1, 639), getRandomInt(1, 399), 1, 1); 
 
    } 
 

 
setInterval(setColor, 50);

<canvas width="640" height="400" id="canvas"></canvas>

источник

2015-04-16 16:22:23 K3N

Большое спасибо! –

Единый цвет через пиксели?

ответ

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