8-3 在线支付-开发仿真“打赏功能”

技能补强在线支付——开发仿真“打赏功能”汇报人：xxx时间：2026技能知识011.什么是SPC技能知识在进入打赏模块之前，要掌握一个核心概念——SPC，它是由W3C与FIDO（FastIdentityOnlineAlliance）联盟合作提出的Web安全支付标准，目标是在网页中实现一种安全、快捷、防欺诈的用户支付体验。SPC尝试从浏览器层面出发，用“本地验证+原生弹窗”的方式完成支付确认，提升安全性与用户体验。2.数据同步机制

在传统身份认证的基础上，SPC进一步引入了“用户授权层”，将身份验证与支付行为强绑定，以保障支付操作的真实性、完整性与抗篡改性。SPC的核心设计理念可以归纳为如图所示的3点。3.传统支付与SPC支付的差异技能知识

为更好地理解网页支付中“确认支付”这一关键环节，我们延续模块2技能补强中的场景，继续完善在电商网站上购物的流程，比如单击“去结算”后，系统引导用户完成支付。

如图展示了“传统支付流程”与“SPC支付流程”的关键差异，SPC作为新的浏览器功能，在简化用户身份验证流程的同时进一步提升了Web支付的安全性。技能实践021.模拟实现支付功能技能实践

零号任务中已在现有的博客页面中划分了一个“博客打赏”区域，并且创建了独立于主文件外的donation.js文件，因此关于打赏功能的代码在donation.js文件中编辑即可(注：本技能补强实现的是仿真的打赏功能，用于模拟调用支付功能)。具体步骤如下。借助AI助手，先为“打赏功能”模块进行整体样式设计。使用Canvas绘制图形，如金额输入框、支付方式选项等。示例代码如下：1.模拟实现支付功能技能实践示例代码运行结果如图：1.模拟实现支付功能技能实践

接下来需要对这个打赏模块添加模拟的支付功能。计算机端的支付功能通常需要显示二维码供用户扫码，现在来实现这个效果，即用户单击“微信支付”或“支付宝”按钮后会弹出一个二维码视窗。同时我们还需要检测用户是否输入了金额，如果未输入，则会弹出弹窗提醒。添加的示例代码后运行结果如图：2.模拟优化支付功能技能实践如果感觉仅有二维码比较单调，我们可以使用Canvas动画相关技术来模拟“扫描二维码”的效果。先创建scanCanvas画布并覆盖在二维码上方,然后使用requestAnimationFrame()实现“扫描线”动画。示例代码如下。思考与练习请同学们注意：填空题考查Canvas默认属性、绘图核心函数、阴影设置、画布清除方法及贝塞尔曲线应用领域；判断题分析Canvas交互能力、坐标系特点、贝塞尔曲线特性、变换方法功能及动态效果适配性；选择题判别文本绘制方法、贝塞尔曲线类型、状态保存操作、文本相关函数及用户交互适配方式。一、填空题1.300px；150px2.fillRect()（或strokeRect()）3.shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY（需组合使用，核心为设置阴影相关属性）4.clearRect()5.图形绘制；动画制作二、判断题1.×2.×3.×4.×5.×三、选择题1.C2.C3.A4.AB5.AB一、填空题1.Canvas元素默认宽度为________，默认高度为________。2.在Canvas中，绘制矩形的函数是________。3.________方法用于为Canvas中的图形添加阴影效果。4.在Canvas中，________方法用于清除画布上的图形。5.贝塞尔曲线可以用于________和________等领域。二、判断题1.Canvas支持多种动画效果，但不能响应用户交互。（）2.Canvas坐标系原点位于右下角。（）3.贝塞尔曲线只需要一个控制点。（）4.在Canvas中，translate()方法用于改变图形的尺寸。（）5.贝塞尔曲线只适用于绘制静态图形，不能用于制作动态效果。（）三、选择题1.在Canvas中，以下哪个方法用于绘制文本？（）A.fillRect() B.drawImage() C.fillText() D.beginPath()2.在Canvas中，以下哪种贝塞尔曲线有两个控制点？（）A.线性贝塞尔曲线 B.二次贝塞尔曲线 C.三次贝塞尔曲线 D.四次贝塞尔曲线3.在Canvas中进行旋转操作时，以下哪个方法用于保存当前状态？（）A.save() B.rotate() C.scale() D.translate()4.以下哪些方法用于操作Canvas中的文本？（多选）（）A.fillText() B.strokeText() C.clearRect() D.dr