H5 canvas制作数字连线效果

最新推荐文章于 2022-04-20 15:05:10 发布

EasonYi_

最新推荐文章于 2022-04-20 15:05:10 发布

阅读量770

点赞数 1

分类专栏：小互动文章标签： canvas javascript js

本文链接：https://blog.csdn.net/yichen454/article/details/111768002

版权

小互动专栏收录该内容

3 篇文章 0 订阅

订阅专栏

小时候都玩过数字连线画册，这里我们用canvas将它实现

逻辑要点：

canvas无法进行回撤操作，即每一步都需要完整的重新绘制
为了体验更好此处做了一个简单的矩形范围吸附效果，完善可以更改成圆形范围

演示链接：

点我

源码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>小互动-数字连线</title>
    <meta name="viewport"
        content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1,viewport-fit=cover">
</head>
<style>
    body {
        background-color: gray;
    }

    #canvas {
        position: absolute;
        background-image: url(./numconnect.jpeg);
    }
</style>


<body style="margin:0;padding:0;" ontouchmove="javascript:window.event.preventDefault();">
    <canvas id="canvas" width="300" height="426"></canvas>
</body>
<script type="text/javascript">
    let points = [
        101, 340,
        58, 356,
        16, 292,
        61, 10,
        46, 294,
        106, 179,
        196, 140,
        224, 120,
        275, 146,
        287, 184
    ]

    let cv = document.getElementById('canvas');
    let ctx = cv.getContext("2d");
    let connectOver = false;
    let curIndex = 0;
    let limit = 10;
    draw();

    function draw() {
        ctx.clearRect(0, 0, cv.width, cv.height);
        for (let index = 0; index < points.length; index += 2) {
            const x = points[index];
            const y = points[index + 1];
            if (index > 0 && index <= 2 * curIndex) {
                drawLine(ctx, points[index - 2], points[index - 1], x, y)
            }
            drawPoint(ctx, x, y);
        }
    }

    function drawLine(ctx, sx, sy, ex, ey) {
        ctx.beginPath()
        ctx.moveTo(sx, sy)
        ctx.lineTo(ex, ey);
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#000';
        ctx.stroke();
    }

    function drawPoint(ctx, cx, cy) {
        let R = 4
        ctx.save();
        ctx.fillStyle = '#000';
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    }

    document.addEventListener('mousedown', onDocumentMouseDown, false);

    function onDocumentMouseDown(event) {
        event.preventDefault();
        document.addEventListener('mousemove', onDocumentMouseMove, false);
        document.addEventListener('mouseup', onDocumentMouseUp, false);
    }

    function onDocumentMouseMove(event) {
        var x = event.clientX;
        var y = event.clientY;
        moveEvent(x, y);
    }

    function onDocumentMouseUp() {
        upEvent();
        document.removeEventListener('mousemove', onDocumentMouseMove);
        document.removeEventListener('mouseup', onDocumentMouseUp);
    }

    document.addEventListener('touchstart', onDocumentTouchStart, false);
    document.addEventListener('touchmove', onDocumentTouchMove, false);
    document.addEventListener('touchend', onDocumentTouchEnd, false);

    function onDocumentTouchStart() {

    }

    function onDocumentTouchMove(event) {
        let x = event.changedTouches[0].clientX;
        let y = event.changedTouches[0].clientY;
        moveEvent(x, y);
    }

    function onDocumentTouchEnd(event) {
        upEvent();
    }

    function moveEvent(x, y) {
        if (connectOver) {
            return;
        }
        draw();
        drawLine(ctx, points[2 * curIndex], points[2 * curIndex + 1], x, y);

        let tx = points[2 * (curIndex + 1)];
        let ty = points[2 * (curIndex + 1) + 1];
        if (Math.abs(x - tx) < limit && Math.abs(y - ty) < limit) {
            curIndex += 1;
            draw();
        }
        if (curIndex == points.length / 2 - 1) {
            connectOver = true;
            alert("连完了")
        }
    }

    function upEvent() {
        if (connectOver) {
            return;
        }
        draw();
    }
</script>
</html>

EasonYi_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5 canvas制作数字连线效果

小时候都玩过数字连线画册，这里我们用canvas将它实现逻辑要点：canvas无法进行回撤操作，即每一步都需要完整的重新绘制为了体验更好此处做了一个简单的矩形范围吸附效果，完善可以更改成圆形范围演示链接：点我源码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>小互动-数字连线</title> <meta nam
复制链接

扫一扫