这里根据鼠标位置实时画出直角三角形,并在一个文本框实时显示斜边长。文件名:distance.html。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>勾股定理应用</title>
<style type="text/css">
#canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<textarea id="log"></textarea>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
mouse = utils.captureMouse(canvas),
log = document.getElementById("log"),
rect = {
x:canvas.width/2,
y:canvas.height/2
};
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){
return window.setTimeout(callback,1000/60);
})
};
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
var dx = rect.x - mouse.x,
dy = rect.y - mouse.y,
dist = Math.sqrt(dx * dx + dy * dy);
context.fillStyle = "#f00";
context.fillRect(rect.x - 2, rect.y - 2, 4, 4);
context.beginPath();
context.moveTo(rect.x,rect.y);
context.lineTo(mouse.x,rect.y);
context.lineTo(mouse.x,mouse.y);
context.lineTo(rect.x,rect.y);
context.closePath();
context.stroke();
log.value = "斜边长为:" + dist;
}());
}
</script>
</body>
</html>
效果图:
参见《HTML5+Javascript动画基础》。