H5 canvas制作数字连线效果

最新推荐文章于 2023-01-12 15:42:19 发布

原创

最新推荐文章于 2023-01-12 15:42:19 发布 · 899 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript #js

小时候都玩过数字连线画册，这里我们用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