【基础知识】HTML5 Canvas精灵表坐标查看器(详细教程)

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy目录项目介绍项目演示详细步骤项目介绍本项目是精灵表(sprite sheet)坐标查看器。精灵表指的是...

苏一恒

2294人浏览 · 2019-08-20 16:29:12

苏一恒 · 2019-08-20 16:29:12 发布

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

项目介绍

项目演示

详细步骤

项目介绍

本项目是精灵表(sprite sheet)坐标查看器。

精灵表指的是一张包涵许多动画图像的图片，在动画的播放过程中，每次都要在精灵表中选取一张图像显示出来，这就意味着你必须知道精灵表中每张图像的精确坐标。

项目演示

https://827652549.github.io/Canvas/Unit1/Listener/SpriteSheets.html

详细步骤

所有的细节都以注释形式写在了代码之中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精灵表坐标查看器Sprite Sheets</title>
    <style>
        body{
            background: #dddddd;
        }
        #canvas {
            position: absolute;
            left: 0px;
            top: 50px;
            margin: 20px;
            background: #ffffff;
            border: thin inset rgba(100,150,230,0.5);
            cursor: pointer;
        }
        #readout {
            margin-top: 10px;
            margin-left: 15px;
            color: blue;
        }
    </style>
</head>
<body>
    <!--用来显示当前精灵表坐标-->
    <div id="readout"></div>
    <p>加载一个图片，移动鼠标，获取基于canvas鼠标处精灵表坐标</p>
    <canvas id="canvas" width="500" height="250">Canvas not supported</canvas>
</body>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        readout = document.getElementById('readout'),
        spritesheet = new Image();

    //Function……
    /**
     * 窗口坐标转化为基于Canvas的坐标
     * @param canvas
     * @param x
     * @param y
     * @returns {{x: number, y: number}}
     */
    function windowToCanvas(canvas,x,y) {
        //获取canvas元素的边界框(bouding box)
        var bbox = canvas.getBoundingClientRect();
        return {
            x:x-bbox.left*(canvas.width/bbox.width),
            y:y-bbox.top*(canvas.height/bbox.height)
        }
    }

    /**
     * 绘制背景条纹线
     */
    function drawBackground(){
        var VERTICAL_LINE_SOACING = 12,
            i = context.canvas.height;

        context.clearRect(0,0,canvas.width,canvas.height);
        context.strokeStyle = 'lightgray';
        context.lineWidth = 0.5;

        //预留出顶部4个网格线高的长度供图片占位,从地部划线，从下往上
        while (i>VERTICAL_LINE_SOACING*4){
            context.beginPath();
            context.moveTo(0,i);
            context.lineTo(canvas.width,i);
            context.stroke();

            i -= VERTICAL_LINE_SOACING;

        }
    }

    /**
     * 绘制精灵表
     */
    function drawSpritesheet(){
        //将图片画到画布上
        context.drawImage(spritesheet,0,0);
    }

    /**
     * 绘制光标跟随网格线
     * @param x
     * @param y
     */
    function drawGuidelines(x, y) {
        context.strokeStyle='rgba(0,0,230,0.8)';
        context.lineWidth = 0.5;
        drawVerticalLine(x);
        drawHorizontalLine(y);

    }

    function updateReadout(x,y){
        //四舍五入到0位小数并输出到#readout元素中
        readout.innerHTML='('+x.toFixed(0)+','+y.toFixed(0)+')';
    }

    /**
     * 绘制水平跟随线
     * @param y
     */
    function drawHorizontalLine(y) {
        context.beginPath();
        context.moveTo(0, y + 0.5);
        context.lineTo(context.canvas.width, y + 0.5);
        context.stroke();
    }

    /**
     * 绘制垂直跟随线
     * @param x
     */
    function drawVerticalLine(x){
        context.beginPath();
        context.moveTo(x+0.5,0);
        context.lineTo(x+0.5,context.canvas.height);
        context.stroke();
    }

    //Event handlers……
    canvas.onmousemove = function (e) {
        var loc = windowToCanvas(canvas, e.clientX, e.clientY);

        drawBackground();
        drawSpritesheet();
        drawGuidelines(loc.x, loc.y);
        updateReadout(loc.x, loc.y);
    };

    //Initialization

    //设置图片路径
    spritesheet.src='../../images/running-sprite-sheet.png';
    //加载图片之后画精灵表
    spritesheet.onload = function (ev) {
        drawSpritesheet();
    };
    //画背景
    drawBackground();

</script>
</html>