HTML5 Canvas (1)-优快云博客

本文介绍了如何利用querySelector选择器捕获鼠标悬停效果，并在HTML元素上显示相关信息。此外，还展示了如何使用HTML5 Canvas API进行基本图形绘制，包括绘制对角线及树状图案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Query Selector Demo</title>
<style type="text/css">
td {
border-style: solid;
border-width: 1px;
font-size: 300%;
}
td:hover {
background-color: cyan;
}
#hoverResult {
color: green;
font-size: 200%;
}
</style>
</head>
<body>
<section>
<!-- create a table with a 3 by 3 cell display -->
<table id="tb1">
<tr>
<td>A1</td> <td>A2</td> <td>A3</td>
</tr>
<tr>
<td>B1</td> <td>B2</td> <td>B3</td>
</tr>
<tr>
<td>C1</td> <td>C2</td> <td>C3</td>
</tr>
</table>
<div>Focus the button, hover over the table cells, and hit Enter to identify them
using querySelector('td:hover').</div>
<!--
<button type="button" id="findHover" autofocus>Find 'td:hover' target</button>
-->
<div id="hoverResult"></div>
<script type="text/javascript">
//document.getElementById("findHover").onclick = function() {
document.getElementById("tb1").onmouseover = function() {
// find the table cell currently hovered in the page
var hovered = document.querySelector("td:hover");
if (hovered)
document.getElementById("hoverResult").innerHTML = hovered.innerHTML;
}
</script>
</section>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Canvas Demo</title>
</head>
<body>
<section>

<canvas id="diagonal" style="border: 1px solid;" width="200" height="200">
</canvas>

<script>
function drawDiagonal() {
// Get the canvas element and its drawing context
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
// Create a path in absolute coordinates
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
// Stroke the line onto the canvas
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>
</section>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draw Trees Demo</title>
</head>
<body>
<section>

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

<script>
function createCanopyPath(context) {
// Draw the tree canopy
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
// Top of the tree
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
// Close the path back to its start point
context.closePath();
}

function drawTrails(context) {
context.save();
context.translate(130, 250);
// Create the shape for our canopy path
createCanopyPath(context);
// Stroke the current path
context.stroke();
context.restore();
}

var canvas = document.getElementById('trails');
var c2 = canvas.getContext('2d');
window.addEventListener("load", drawTrails(c2), true);
</script>
</section>
</body>
</html>