如何使用 ImageData 直接在畫布上繪制垂直線？
[英]How to draw vertical lines on canvas directly with ImageData?
問題描述
我不明白為什么這些線是對角線且點不均勻。 我正在嘗試繪制直線垂直線。
'use strict'; function loadImage(url) { return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; }); } (async () => { const canvas = document.querySelector('canvas'); const context = canvas.getContext('2d'); const image = await loadImage("data:image/png;base64,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"); canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); for (let i = 0; i < image.width * 4; i += 4) { for (let j = 0; j < image.height * 4; j += 4) { imageData.data[(i * j) + 0] = 0; imageData.data[(i * j) + 1] = 0; imageData.data[(i * j) + 2] = 0; imageData.data[(i * j) + 3] = 255; } } context.putImageData(imageData, 0, 0); })();
html { background: yellow; } * { margin: 0; padding: 0; }
<!DOCTYPE html> <html> <head> </head> <body> <canvas></canvas> </body> </html>
1 個解決方案
解決方案1
0 2020-10-28 00:59:23
'use strict'; function loadImage(url) { return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; }); } (async () => { const canvas = document.querySelector('canvas'); const context = canvas.getContext('2d'); const image = await loadImage("data:image/png;base64,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"); canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); for (let x = 0; x < canvas.height * 4; x += 1) { for (let y = 0; y < canvas.width * 4; y += 4 * 10) { const i = y + canvas.width * 4 * x; imageData.data[i + 0] = 0; imageData.data[i + 1] = 0; imageData.data[i + 2] = 0; imageData.data[i + 3] = 255; } } context.putImageData(imageData, 0, 0); })();
html { background: yellow; } * { margin: 0; padding: 0; }
<!DOCTYPE html> <html> <head> </head> <body> <canvas></canvas> </body> </html>
如何在Javascript中使用Canvas繪制垂直線作為音樂曲目進度條
[英]How to draw vertical lines as a music track progressbar using Canvas in Javascript
如何直接將圖像繪制到ImageData數組-HTML5 / Javascript
[英]How to draw an image directly to an ImageData array - HTML5/Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.