0
点赞
收藏
分享

微信扫一扫

HTML5 Canvas笔记——精灵表坐标查看器

参考书目:《HTML5 Canvas核心技术 图形、动画与游戏开发》

用HTML5 Canvas实现精灵表坐标查看器!

1-5.html

<!DOCTYPE html>

<html>

<head>

    <title>Sprite Sheets</title>

    <style>

        body{

            background: #dddddd;

        }

        #canvas{

            position: absolute;

            left: 0px;

            top: 20px;

            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>

    <canvas id="canvas" width="500" height="250">

        Canvas not supported

    </canvas>

    <script src="1-6.js"></script>

</body>

</html>

1-6.js

var canvas=document.getElementById('canvas'),

readout=document.getElementById('readout'),

context=canvas.getContext('2d'),

spritesheet=new Image();

function windowToCanvas(canvas,x,y){

    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_SPACING=12,

    i=context.canvas.height;

    context.clearRect(0,0,canvas.width,canvas.height);

    context.strokeStyle='lightgray';

    context.lineWidth=0.5;

    while(i>VERTICAL_LINE_SPACING*4){

        context.beginPath();

        context.moveTo(0,i);

        context.lineTo(context.canvas.width,i);

        context.stroke();

        i-=VERTICAL_LINE_SPACING;

    }

}

function drawSpritesheet(){

    context.drawImage(spritesheet,0,0);

}

function drawGuidelines(x,y){

    context.strokeStyle='rgba(0,0,230,0.8)';

    context.lineWidth=0.5;

    drawVerticalLine(x);

    drawHorizontalLine(y);

}

function updateReadout(x,y){

    readout.innerText='('+x.toFixed(0)+','+y.toFixed(0)+')';

}

function drawHorizontalLine(y){

    context.beginPath();

    context.moveTo(0,y+0.5);

    context.lineTo(context.canvas.width,y+0.5);

    context.stroke();

}

function drawHorizontalLine(x){

    context.beginPath();

    context.moveTo(x+0.5,0);

    context.lineTo(x+0.5,context.canvas.height);

    context.stroke();

}

canvas.onmousemove=function(e){

    var loc = windowToCanvas(canvas,e.clientX,e.clientY);

    drawBackground();

    drawSpritesheet();

    drawGuidelines(loc.x,loc.y);

    updateReadout(loc.x,loc.y);

};

spritesheet.src='running-sprite-sheet.png';

spritesheet.onload=function(e){

    drawSpritesheet();

};

drawBackground();

效果如图:

举报

相关推荐

0 条评论