TAG
CSS
JavaScript
Result
Run
License
<canvas id="mycanvas" width="200" height="200"></canvas> <p id="console"></p>
#mycanvas { border: 1px solid #CCC; float: left; margin-right: 20px; }
window.addEventListener("load", function() { const elCanvas = document.getElementById("mycanvas"); const context = elCanvas.getContext("2d"); const elConsole = document.getElementById("console"); const imgData = new ImageData(100, 100); let opacity = 1 for(let i = 0; i < imgData.data.length; i += 4) { if (i / 4 % imgData.width == 0) opacity++; if (opacity > 255) opacity = 1; imgData.data[i + 0] = 0; imgData.data[i + 1] = 127; imgData.data[i + 2] = 255; imgData.data[i + 3] = opacity; } context.putImageData(imgData, 50, 50); elConsole.textContent = `width: ${imgData.width}, height: ${imgData.height}`; });
Console
expand_less
License
License
by DevDic
Close