<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> Canvas { border: 1px 破線グレー; } </style> <script type="text/javascript"> window.onload = function() { // キャンバス オブジェクトを取得します var oCanvas = document.getElementById("canvas" ) ; if (oCanvas.getContext) { // 2D 描画コンテキストを取得します var oContext = oCanvas.getContext("2d"); var oImageData = oContext.createImageData(100, 100); var data = oImageData.data; for (var i = 0; i < data.length; i = 4) { // 赤のデータ[i 0] = 255; // 緑のデータ[i 1] = 0; // 青のデータ[i 2] = 0; / / 透明度データ[i 3] = 100; } oContext.putImageData(oImageData, 10, 10); } } </script> </head> <body> <canvas id="canvas" height="600 " width="600"></canvas> </body></html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
なぜ効果がないのか、コースに沿って書いてみました