运行 ❯
获取您
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
前往 Spaces
<!DOCTYPE html> <html> <body> <h1>HTML5 Canvas</h1> <h2>The getImageData() Method</h2> <img id="scream" src="../jsref/img_the_scream.jpg" alt="The Scream" width="220" height="277"> <canvas id="myCanvas" width="220" height="277" style="border:1px solid grey"></canvas> <script> document.getElementById("scream").onload = function() { const c = document.getElementById("myCanvas"); const ctx = c.getContext("2d"); const img = document.getElementById("scream"); ctx.drawImage(img, 0, 0); const imgData = ctx.getImageData(0, 0, c.width, c.height); // invert colors for (let i = 0; i < imgData.data.length; i += 4) { imgData.data[i] = 255 - imgData.data[i]; imgData.data[i+1] = 255 - imgData.data[i+1]; imgData.data[i+2] = 255 - imgData.data[i+2]; imgData.data[i+3] = 255; } ctx.putImageData(imgData, 0, 0); }; </script> </body> </html>
