揭秘HTML5 Canvas：轻松绘制与交互式表格的神奇之旅

HTML5 Canvas 是一个强大的工具，它允许开发者使用 JavaScript 在网页上绘制图形和图像。Canvas 提供了一个画布，开发者可以在其中绘制各种形状、文本、图像以及实现复杂的动画效果。本文将带您深入了解 HTML5 Canvas 的基本概念、使用方法，并展示如何用它来创建交互式表格。

一、HTML5 Canvas 基础

1.1 Canvas 元素

在 HTML 中，Canvas 元素通过 <canvas> 标签创建。以下是一个简单的 Canvas 示例：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

这里，id 属性用于在 JavaScript 中引用该 Canvas，width 和 height 属性定义了 Canvas 的大小。

1.2 JavaScript 控制Canvas

使用 JavaScript，我们可以控制 Canvas 的绘制操作。以下是一个使用 JavaScript 绘制矩形的示例：

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 100);

在这个例子中，getContext("2d") 方法用于获取 Canvas 的 2D 上下文，它是绘制图形的接口。fillStyle 设置矩形的填充颜色，fillRect 方法绘制矩形。

二、绘制基本形状

Canvas 支持多种绘图操作，包括绘制矩形、圆形、线条和文本。以下是一些基本的绘图方法：

2.1 绘制矩形

ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 100, 50);

2.2 绘制圆形

ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI*2, true); ctx.fill();

2.3 绘制线条

ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(200, 100); ctx.stroke();

2.4 绘制文本

ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50);

三、交互式表格

使用 Canvas 创建交互式表格，可以通过监听鼠标事件来实现。以下是一个简单的交互式表格示例：

<canvas id="tableCanvas" width="500" height="300" style="border:1px solid #000000;"></canvas>

var canvas = document.getElementById("tableCanvas"); var ctx = canvas.getContext("2d"); // 绘制表格线 function drawTable() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布 for (var x = 0; x <= canvas.width; x += 10) { ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); } for (var y = 0; y <= canvas.height; y += 10) { ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); } ctx.stroke(); } // 绘制表格数据 function drawData() { ctx.font = "12px Arial"; ctx.fillStyle = "#000000"; for (var i = 0; i < 10; i++) { for (var j = 0; j < 10; j++) { ctx.fillText(i + "," + j, j * 10 + 5, i * 10 + 15); } } } // 鼠标点击事件 canvas.addEventListener('click', function(e) { var rect = canvas.getBoundingClientRect(); var x = e.clientX - rect.left; var y = e.clientY - rect.top; var row = Math.floor(y / 10); var col = Math.floor(x / 10); alert("Clicked on row: " + row + ", column: " + col); }); drawTable(); drawData();

在这个例子中，我们首先绘制了表格线，然后绘制了表格数据。当用户点击表格时，会弹出点击的行列信息。