笔记九（勾股定理应用）

来源：互联网发布：python 卷积编辑：程序博客网时间：2024/06/10 23:59

这里根据鼠标位置实时画出直角三角形，并在一个文本框实时显示斜边长。文件名：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动画基础》。

0 0