欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML5 Canvas (1) 博客分类： Web HTML5querySelectoraddEventListenertranslate 

程序员文章站 2024-03-17 09:57:16
...
<!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>
相关标签： HTML5 querySelector addEventListener translate

上一篇： [Event]事件（高程版）（二）事件处理程序 博客分类： Web前端-JS客户端 浏览器attachEventaddEventListener 

下一篇： opencv快速入门人脸检测与人脸识别

推荐阅读