HTML5 Canvas (1)

sco.struts

浏览: 18978 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5 querySelector addEventListener translate

<!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>

分享到：

Android讀書筆記(1)：撥號程序 | 全是因為錢

2012-06-15 13:20
浏览 1154
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 Canvas (1)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 Canvas (1)

评论

发表评论

相关推荐

HTML5 Canvas (2)

IBM：使用AJAX构建应用程序

最近访客更多访客>>