Вставьте один пиксель в холст HTML5 - PullRequest
Новая
       13

Вставьте один пиксель в холст HTML5

3 голосов
/ 27 сентября 2011

Я хочу вставить пиксель с цветом, и я использую этот код: 

context.fillStyle='RGB('+s[i]+')';
context.fillRect(i,y,1,1)

Есть ли более короткий способ сделать это?например, в одной строке кода?Моя главная цель - уменьшить количество кода.

Ответы [ 4 ]

1 голос
/ 27 сентября 2011

Нет более короткого способа сделать это, кроме метода, который вы использовали выше. У вас нет для включения fillStyle каждый раз, так что по сути это всего одна строка кода для заполнения пикселя.

Как отметил Петтери, существует еще один способ заполнения пикселей, который заключается в непосредственном манипулировании данными пикселей.

Демонстрация в реальном времени 

var canvasData = ctx.getImageData(0,0,canvasWidth,canvasHeight);

//color 100,100 red
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 0] = 255;
ctx.putImageData(canvasData,0,0);

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

canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 0] //red
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 1] //green
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 2] //blue
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 3] //alpha

при условии, что вы можете хранить свои данные в массиве и просто перебирать их и окрашивать по мере необходимости.

0 голосов
/ 12 октября 2011 
fillStyle="rgb("+a[m];
fillRect(m,o,1,1);

Кто-то сделал с этим: P

0 голосов
/ 27 сентября 2011

Нет, в одной строке кода нет способа изменить один пиксель на один цвет. Ну, вроде как.

Как отметил Петтери, есть способ изменить каждый пиксель напрямую, что, вероятно, приведет к тому, что вы хотите. Я предполагаю, что вы хотите изменить один пиксель на один цвет, а следующий пиксель на другой цвет и т. Д.

Например, вот функция обесцвечивания холста. То, что он делает, берет каждый пиксель и усредняет значения RGB, чтобы быть нейтральным по цвету (не иметь насыщенности). В результате получается изображение в градациях серого. 

function grayscale() {
    var imageData = ctx.getImageData(0,0,can.width, can.height);
    var pixels = imageData.data;
    var numPixels = pixels.length;

    ctx.clearRect(0, 0, can.width, can.height);

    for (var i = 0; i < numPixels; i++) {
        var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3;
        // set red green and blue pixels to the average value
        pixels[i*4] = average;
        pixels[i*4+1] = average;
        pixels[i*4+2] = average;
    }
    ctx.putImageData(imageData, 0, 0);
}

Как видите, он повторяется по каждому пикселю. Можно легко изменить, чтобы каждый пиксель был изменен на одну строку.

Вместо: 

pixels[i*4] = average;
pixels[i*4+1] = average;
pixels[i*4+2] = average;

Вы бы написали: 

// Take out 3 values starting at i*4 and add the new RGB for that pixel
pixels.splice(i*4,3,REDVALUE,GREENVALUE,BLUEVALUE);

Что бы выполнить то, что вы хотели. Это не самый эффективный способ под солнцем, но он достиг бы вашей цели:)

0 голосов
/ 27 сентября 2011

Вы можете редактировать данные изображения холста напрямую. Вот хороший пример, как это сделать: http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/

...