首页页面中创建画布，画布中绘制一行16列小方格

页面中创建画布，画布中绘制一行16列小方格

时间: 2024-01-22 07:19:44 浏览: 66

好的，你可以使用HTML5中的canvas元素和JavaScript来创建画布并绘制小方格。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas Example</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="400" height="100"></canvas> <script> // 获取画布元素 var canvas = document.getElementById("myCanvas"); // 获取绘图上下文 var ctx = canvas.getContext("2d"); // 设置小方格的宽度和高度 var boxSize = 20; // 绘制16列小方格 for (var i = 0; i < 16; i++) { // 计算小方格的位置 var x = i * boxSize; var y = 0; // 绘制小方格 ctx.fillStyle = "black"; ctx.fillRect(x, y, boxSize, boxSize); } </script> </body> </html> ``` 这段代码会创建一个宽度为400像素、高度为100像素的画布，并在画布上绘制一行16列黑色小方格，每个小方格的宽度和高度都为20像素。你可以根据需要调整小方格的大小和数量。

阅读全文