PL
JavaScript - jak narysować piksel na elemencie canvas?
0 points
Używając elementu canvas JavaScript nie można uzyskać dostępu do pojedynczego piksela, ale jest kilka sztuczek, jak to zrobić. W artykule przedstawiono proste podejścia.
To podejście jest przydatne, gdy chcemy narysować pojedyncze piksele na istniejącym rysunku.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="200" height="200"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
function drawPixel(x, y, color) {18
// aby zmniejszyć wygładzanie liczb z częścią dziesiętną19
var roundedX = Math.round(x);20
var roundedY = Math.round(y);21
22
context.beginPath();23
context.fillStyle = color || '#000';24
context.fillRect(roundedX, roundedY, 1, 1);25
context.fill();26
}27
28
var colors = ['red', 'blue', 'orange', 'yellow', 'brown', 'green'];29
30
var t1 = new Date();31
32
for(var i = 0; i < 10000; ++i) {33
var x = canvas.width * Math.random();34
var y = canvas.height * Math.random();35
var color = colors[i % colors.length];36
37
drawPixel(x, y, color);38
}39
40
var t2 = new Date();41
var dt = t2 - t1;42
43
console.log('upłynęło: ' + dt + ' ms');44
45
</script>46
</body>47
</html>Takie podejście jest przydatne, gdy chcemy narysować pojedyncze piksele na istniejącym rysunku.
Uwaga:
to rozwiązanie ma słabą wydajność
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="200" height="200"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
// by zwiększyć wydajność, metoda createImageData 18
// powinna być wywołana tylko raz, np przed rysowaniem19
var image = context.createImageData(1, 1); // piksel20
var data = image.data;21
22
function drawPixel(x, y, color) {23
data[0] = color.r;24
data[1] = color.g;25
data[2] = color.b;26
data[3] = color.a;27
28
context.putImageData(image, x, y);29
}30
31
var colors = [32
{r: 255, g: 0, b: 0, a: 255}, // czerwony33
{r: 0, g: 255, b: 0, a: 255}, // zielony34
{r: 0, g: 0, b: 255, a: 255}, // niebieski35
];36
37
var t1 = new Date();38
39
for(var i = 0; i < 10000; ++i) {40
var x = canvas.width * Math.random();41
var y = canvas.height * Math.random();42
var color = colors[i % colors.length];43
44
drawPixel(x, y, color);45
}46
47
var t2 = new Date();48
var dt = t2 - t1;49
50
console.log('upłynęło: ' + dt + ' ms');51
52
</script>53
</body>54
</html>Takie podejście jest przydatne, gdy chcemy narysować wszystko samodzielnie.
Uwaga: to rozwiązanie ma bardzo dobrą wydajność.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="200" height="200"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
// aby zwiększyć wydajność, metodę createImageData18
// należy wykonać tylko raz, np. przed rysowaniem19
var image = context.createImageData(canvas.width, canvas.height);20
var data = image.data;21
22
function drawPixel(x, y, color) {23
var roundedX = Math.round(x);24
var roundedY = Math.round(y);25
26
var index = 4 * (canvas.width * roundedY + roundedX);27
28
data[index + 0] = color.r;29
data[index + 1] = color.g;30
data[index + 2] = color.b;31
data[index + 3] = color.a;32
}33
34
function swapBuffer() {35
context.putImageData(image, 0, 0);36
}37
38
var colors = [39
{r: 255, g: 0, b: 0, a: 255}, // czerwony40
{r: 0, g: 255, b: 0, a: 255}, // zielony41
{r: 0, g: 0, b: 255, a: 255}, // niebieski42
];43
44
var t1 = new Date();45
46
for(var i = 0; i < 10000; ++i) {47
var x = canvas.width * Math.random();48
var y = canvas.height * Math.random();49
var color = colors[i % colors.length];50
51
drawPixel(x, y, color);52
}53
54
swapBuffer();55
56
var t2 = new Date();57
var dt = t2 - t1;58
59
console.log('upłynęło: ' + dt + ' ms');60
61
</script>62
</body>63
</html>