首页canvas 绘制一个色块

canvas 绘制一个色块

时间: 2023-11-10 10:02:23 浏览: 150

canvas 绘图

canvas html5 开发。

以下是一个使用 Canvas 绘制色块的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas 绘制色块</title> </head> <body> <canvas id="myCanvas" width="100" height="100"></canvas> <script> // 获取 Canvas 元素 var canvas = document.getElementById("myCanvas"); // 获取 2D 渲染上下文 var ctx = canvas.getContext("2d"); // 绘制色块 ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色 ctx.fillRect(0, 0, 100, 100); // 绘制矩形色块 </script> </body> </html> ``` 以上代码中，我们首先通过 `document.getElementById()` 方法获取 Canvas 元素，然后通过 `getContext()` 方法获取 2D 渲染上下文。接着，我们设置填充颜色为红色，然后使用 `fillRect()` 方法绘制一个矩形色块。其中，`fillRect()` 方法的参数依次为：起始 x 坐标、起始 y 坐标、宽度和高度。

阅读全文