Last active
January 17, 2021 02:29
-
-
Save tyfkda/f24bf0be03c750ebc96f to your computer and use it in GitHub Desktop.
HTML5でキャンバスをピクセル単位で操作する: Please see https://tyfkda.github.io/blog/2014/12/26/canvas-pixel.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas = document.getElementById('mycanvas'); | |
| var context = canvas.getContext('2d'); | |
| // キャンバス全体のピクセル情報を取得 | |
| var imageData = context.getImageData(0, 0, canvas.width, canvas.height); | |
| var width = imageData.width, height = imageData.height; | |
| var pixels = imageData.data; // ピクセル配列：RGBA4要素で1ピクセル | |
| // ピクセル単位で操作できる | |
| for (var y = 0; y < height; ++y) { | |
| for (var x = 0; x < width; ++x) { | |
| var base = (y * width + x) * 4; | |
| // なんかピクセルに書き込む | |
| pixels[base + 0] = x; // Red | |
| pixels[base + 1] = y; // Green | |
| pixels[base + 2] = Math.max(255 - x - y, 0); // Blue | |
| pixels[base + 3] = 255; // Alpha | |
| } | |
| } | |
| // 変更した内容をキャンバスに書き戻す | |
| context.putImageData(imageData, 0, 0); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="mycanvas" width="256" height="256"></canvas> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Canvas pixel test</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <script type="text/javascript" src="main.js"></script> | |
| </head> | |
| <body> | |
| <canvas id="mycanvas" width="256" height="256"></canvas> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas = document.getElementById('mycanvas'); | |
| var context = canvas.getContext('2d'); | |
| // キャンバス全体のピクセル情報を取得 | |
| var imageData = context.getImageData(0, 0, canvas.width, canvas.height); | |
| var width = imageData.width, height = imageData.height; | |
| var pixels = imageData.data; // ピクセル配列：4要素で1ピクセル | |
| // ピクセル単位で操作できる | |
| for (var y = 0; y < height; ++y) { | |
| for (var x = 0; x < width; ++x) { | |
| var base = (y * width + x) * 4; | |
| // なんかピクセルに書き込む | |
| pixels[base + 0] = x; | |
| pixels[base + 1] = y; | |
| pixels[base + 2] = Math.max(255 - x - y, 0); | |
| pixels[base + 3] = 255; | |
| } | |
| } | |
| // 変更した内容をキャンバスに書き戻す | |
| context.putImageData(imageData, 0, 0); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment