笔记九（勾股定理应用）

最新推荐文章于 2024-03-09 09:45:12 发布

草木黄尘

最新推荐文章于 2024-03-09 09:45:12 发布

阅读量635

点赞数

分类专栏：前端动画基础学习笔记文章标签：动画html5

本文链接：https://blog.csdn.net/qq_24849765/article/details/49872775

版权

前端动画基础学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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