Languages
[Edit]
PL

JavaScript - jak narysowa─ç piksel na elemencie canvas?

0 points
Created by:
Dirask Community
5460

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.

1. Rysowanie pojedynczego piksela przy użyciu metody fillRect()

To┬ápodej┼Ťcie jest przydatne, gdy chcemy narysowa─ç pojedyncze piksele na istniej─ůcym rysunku.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    #my-canvas { border: 1px solid gray; }
    
  </style>
</head>
<body>
  <canvas id="my-canvas" width="200" height="200"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    function drawPixel(x, y, color) {
      	// aby zmniejszy─ç wyg┼éadzanie liczb z cz─Ö┼Ťci─ů dziesi─Ötn─ů
		var roundedX = Math.round(x);
        var roundedY = Math.round(y);
  
        context.beginPath();
        context.fillStyle = color || '#000';
      	context.fillRect(roundedX, roundedY, 1, 1);
        context.fill();
    }
    
    var colors = ['red', 'blue', 'orange', 'yellow', 'brown', 'green'];

    var t1 = new Date();

    for(var i = 0; i < 10000; ++i) {
      	var x = canvas.width * Math.random();
      	var y = canvas.height * Math.random();
      	var color = colors[i % colors.length];
      
    	drawPixel(x, y, color);
    }
    
    var t2 = new Date();
    var dt = t2 - t1;
    
    console.log('upłynęło: ' + dt + ' ms');

  </script>
</body>
</html>

2. metoda putImageData z przykładem klasy pojedynczego piksela

Takie podej┼Ťcie jest przydatne, gdy chcemy narysowa─ç pojedyncze piksele na istniej─ůcym rysunku.

Uwaga:

to rozwi─ůzanie ma s┼éab─ů wydajno┼Ť─ç

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    #my-canvas { border: 1px solid gray; }
    
  </style>
</head>
<body>
  <canvas id="my-canvas" width="200" height="200"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    // by zwi─Ökszy─ç wydajno┼Ť─ç, metoda createImageData 
    // powinna być wywołana tylko raz, np przed rysowaniem
    var image = context.createImageData(1, 1); // piksel
	var data = image.data;

    function drawPixel(x, y, color) {
      	data[0] = color.r;
        data[1] = color.g;
        data[2] = color.b;
        data[3] = color.a;
      
        context.putImageData(image, x, y);
    }
    
    var colors = [
      	{r: 255, g:   0, b:   0, a: 255}, // czerwony
      	{r:   0, g: 255, b:   0, a: 255}, // zielony
      	{r:   0, g:   0, b: 255, a: 255}, // niebieski
    ];

    var t1 = new Date();

    for(var i = 0; i < 10000; ++i) {
      	var x = canvas.width * Math.random();
      	var y = canvas.height * Math.random();
      	var color = colors[i % colors.length];
      
    	drawPixel(x, y, color);
    }
    
    var t2 = new Date();
    var dt = t2 - t1;
    
    console.log('upłynęło: ' + dt + ' ms');

  </script>
</body>
</html>

3. metoda putImageData z przykładem podwójnego buforowania

Takie podej┼Ťcie jest przydatne, gdy chcemy narysowa─ç wszystko samodzielnie.

Uwaga: to rozwi─ůzanie ma┬ábardzo dobr─ů wydajno┼Ť─ç.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    #my-canvas { border: 1px solid gray; }
    
  </style>
</head>
<body>
  <canvas id="my-canvas" width="200" height="200"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    // aby zwi─Ökszy─ç wydajno┼Ť─ç, metod─Ö createImageData
    // nale┼╝y wykona─ç tylko raz, np. przed rysowaniem
    var image = context.createImageData(canvas.width, canvas.height);
	var data = image.data;

    function drawPixel(x, y, color) {
      	var roundedX = Math.round(x);
      	var roundedY = Math.round(y);
      
      	var index = 4 * (canvas.width * roundedY + roundedX);
      
      	data[index + 0] = color.r;
        data[index + 1] = color.g;
        data[index + 2] = color.b;
        data[index + 3] = color.a;
    }
    
    function swapBuffer() {
    	context.putImageData(image, 0, 0);
    }
    
    var colors = [
      	{r: 255, g:   0, b:   0, a: 255}, // czerwony
      	{r:   0, g: 255, b:   0, a: 255}, // zielony
      	{r:   0, g:   0, b: 255, a: 255}, // niebieski
    ];

    var t1 = new Date();
	
    for(var i = 0; i < 10000; ++i) {
      	var x = canvas.width * Math.random();
      	var y = canvas.height * Math.random();
      	var color = colors[i % colors.length];
      
    	drawPixel(x, y, color);
    }
    
    swapBuffer();
    
    var t2 = new Date();
    var dt = t2 - t1;
    
    console.log('upłynęło: ' + dt + ' ms');

  </script>
</body>
</html>
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join