HTML5 Canvas (一)
日期：2014-05-17 浏览次数：20633 次
HTML5 Canvas (1)
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
