JavaScript+Canvas模拟实现支付宝画年兔游戏

更新时间：2023年01月14日 11:19:05 作者：郑丫头

接近过年了，支付宝的集福的活动又开始了，集美们的五福集齐了没有。每年的集福活动都有一些小游戏，今年也不例外，画年画就是其中之一，本篇用canvas来写一个画年兔的游戏

动手前的思路

画年画游戏规则是：跟着特定轮廓画出线条来。

思考1、如何让鼠标只能在特定区域内画画？

首先要获取到这个轮廓区域所在画布上的位置，判断鼠标绘画的位置是否在指定范围内。用canvas的getImageData函数能够获取到画布上有颜色的像素点，然后根据像素点分布计算出像素点所在位置。

getImageData函数的用法在我之前的文章canvas文字粒子特效中有详细介绍，不懂的可以去看看。

getImageData(canvas, ctx) {
    const data = ctx.getImageData(
        0,
        0,
        canvas.width,
        canvas.height,
    ).data;
    const gap = 4;
    const points = [];
    const length = data.length;
    for (let i = 0, wl = canvas.width * gap; i < length; i += gap) {
        if (data[i + gap - 1] == 255) {
            // 根据透明度判断
            const x = (i % wl) / gap;
            const y = Math.ceil(i / wl);
            points.push([x, y]);
        }
    }
    return points;
}

思考2、如何让绘制的图画动起来

通过定时旋转画布实现。我选择用帧动画requestAnimationFrame函数，比setInterval函数性能更好一点。

思考3、如何撤销上一步操作

将每一步绘制的点都记录到创建的栈中，每一次撤销都把上一步的绘制点删除。

思考4、如何判断线条绘制完毕

想了很久没有什么太好的办法，如果你有想法可以分享给我。当mouseup事件执行，会判断当前步骤下绘制的点数是否>=30，如果满足条件会延迟半秒执行下一步绘制，当mousedown在半秒内触发，延迟函数会取消，等待下一个mouseup事件。

// mouseup事件
const length = _this.execStack.reduce((prev, next) => {
    if (next.step == _this.curStep) {
        prev += next.points.length;
    }
    return prev;
}, 0)
if (length >= 30) {
    _this.timer = setTimeout(() => {
        if (_this.curStep == 2) {
            _this.curStep = 2.5
            _this.canEdit = false;
            _this.animate('ears_1', 3);
        } else if (_this.curStep == 4) {
            _this.curStep = 4.5
            _this.canEdit = false;
            _this.animate('shake_head', 5);
        } else if (_this.curStep == 6) {
            _this.curStep = 6.5
            _this.canEdit = false;
            _this.animate('shake_body', 7);
        } else if (_this.curStep <= 6) {
            _this.canEdit = true;
            _this.curStep += 1;
        }
        _this.execCanvas();
    }, 500);
}

关键步骤

1、创建一个RabbitPainting类，初始化时监听canvas的鼠标点击事件。要注意的是移动端和pc端监听的事件不同：

this.pcEvents = ['mousedown', 'mousemove', 'mouseup'];
this.mobileEvents = ['touchstart', 'touchmove', 'touchend'];

我的代码里对兼容的处理比较粗糙，只是将大致功能做出来了，所以大家多看看思路。

鼠标移开之后，需要解除事件监听，当鼠标重新按压时再绑定事件。mousedown事件监听流程如下：

鼠标移动时，会得到两个点，鼠标按压位置和鼠标移动位置，如果绘制的线都是从按压点到移动点的话，就会画出：

上图所示，红色的线是鼠标移动路径，黑色的线是canvas画出的线条，所以mousemove函数执行后要更新初始按压点，使前后两个点衔接在一起。

线条绘制函数如下：

drawLine(point) {
    const { ctx } = this
    ctx.beginPath()
    ctx.moveTo(point.startX, point.startY);
    ctx.lineTo(point.endX, point.endY);
    if (point.style) {
        for (let key in point.style) {
            ctx[key] = point.style[key]
        }
    }
    ctx.stroke();
    ctx.closePath()
}

2、兔子轮廓绘制，采用贝塞尔2阶函数绘制图形

// 外轮廓样式
const wrapperStyle = {
    lineWidth: "30",
    strokeStyle: this.tipPathColor[0]
}
// 内虚线样式
const innerStyle = {
    lineWidth: "3",
    strokeStyle: this.tipPathColor[1],
    lineDash: [15, 12]
}

drawCurve({ list, wrapperStyle, innerStyle }) {
    const { tempCtx: ctx } = this
    list.forEach(point => {
        const { x, y, list } = point;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.bezierCurveTo(...list);
        for (let key in wrapperStyle) {
            ctx[key] = wrapperStyle[key]
        }
        ctx.stroke();
        ctx.save()
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.bezierCurveTo(...list);
        for (let key in innerStyle) {
            if (key == 'lineDash') {
                ctx.setLineDash(innerStyle[key]);
            }
            ctx[key] = innerStyle[key]
        }
        ctx.stroke();
        ctx.restore();
    })
}

贝塞尔曲线的关键在于设置p1和p2两个控制点，大家自行把握。

我的兔子轮廓总体是这样的：

3、旋转画布功能

使用canvas的rotate函数，画布的默认中心点是（0,0），所以旋转时需要用translate（x,y）函数将中心点移动到特定位置。要注意旋转后将画布的中心点还原到（0,0）。

const rotateCanvas = (centerPoints, item) => {
    ctx.save()
    ctx.translate(...centerPoints)
    ctx.rotate(Math.PI / 180 * item.curDeg)
    ctx.translate(-centerPoints[0], -centerPoints[1])
}

注意ctx.save()，用来记录画布旋转之前的状态，绘制结束后需要用ctx.restore()将画布状态还原，否则定时函数执行角度旋转时角度会累加。

4、眨眼睛动画

眨眼睛是用一张精灵图，因为图片是我自己画的，只有六帧，所以动画看起来不是很好，将就看着吧。

以上就是JavaScript+Canvas模拟实现支付宝画年兔游戏的详细内容，更多关于JavaScript Canvas画年兔游戏的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

实例讲解JavaScript截取字符串
在本文中小编通过实例给大家分享了JavaScript中如何截取字符串的方法，需要的朋友们参考一下。
2018-11-11
利用递增的数字返回循环渐变的颜色的js代码
其实很久前就想写一个这样的函数了。因为很多时候需要利用递增数字返回一个渐变颜色序列，今天终于完成了。
2008-10-10
使用JavaScript获取电池状态的方法
这篇文章主要介绍了使用JavaScript获取电池状态的方法,需要的朋友可以参考下
2014-05-05
JavaScript 接口原理与用法实例详解
这篇文章主要介绍了JavaScript 接口原理与用法,结合实例形式详细分析了JavaScript 接口原理、优缺点、用法及操作注意事项,需要的朋友可以参考下
2020-05-05
webpack-dev-server原理解析及跨域解决方法
这篇文章主要介绍了webpack-dev-server原理解析及跨域解决方法,需要的朋友可以参考下
2024-01-01
利用CSS、JavaScript及Ajax实现高效的图片预加载
图片预加载想必大家都不陌生吧，实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效
2013-10-10
js 获取(接收)地址栏参数值的方法
当地址栏含有参数，我们可以再目标页面通过window.location.search来获取我们需要的参数及其值，接下来为大家介绍下详细获取方法，感兴趣的朋友可以参考下哈
2013-04-04
js实现拖动模态框
这篇文章主要为大家详细介绍了js实现拖动模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
arctext.js实现文字平滑弯曲弧形效果的插件
这篇文章主要介绍了arctext.js实现文字平滑弯曲弧形效果的插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Aptos SDK交互实现过程详解
这篇文章主要为大家介绍了Aptos SDK交互实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03