利用Canvas模仿百度贴吧客户端loading小球的方法-H5教程-PHP中文网

首页

web前端

H5教程

利用Canvas模仿百度贴吧客户端loading小球的方法

不言

Jul 03, 2018 am 10:50 AM

canvas loading 客户端百度贴吧

这篇文章主要给大家介绍了关于利用Canvas模仿百度贴吧客户端loading小球的实现方法，实现后的相关非常相似，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考价值，需要的朋友们来一起学习学习吧。

前言

最近看到两个好玩的 demo，效果图如下：

今天趁着周末有空，用 H5 的 Canvas 仿了一下。这篇文章只实现第一个效果图。

这是我实现的效果：

实现原理

实现原理是参考简书的那篇文章，这里不再复述。现在我们来一步一步实现这样的效果。

第零步：画一个圆

源码如下：

运行效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度贴吧客户端Loading小球</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById(&#39;canvas&#39;)
    var ctx = canvas.getContext(&#39;2d&#39;)
    canvas.width = 500
    canvas.height = 500

    var grid = canvas.width / 4
    var cx = canvas.width / 2 // 圆中心点 x 坐标
    var cy = canvas.height / 2 // 圆中心点 y 坐标

    function circle() {
        ctx.beginPath()
        ctx.arc(cx, cy, grid / 2, 0, 2 * Math.PI)
    }

    circle()
    ctx.stroke()
</script>
</body>
</html>

登录后复制

这个 demo 只涉及 Canvas 最简单的用法。

第一步：绘制蓝色的“贴”字

使用 ctx.fillText，在圆的中心绘制一个蓝色的“帖”字。文字粗体、水平居中。

代码如下：

function text(fillStyle) {
    var fontSize = size / 250 * 120
    ctx.font = &#39;bold &#39; + fontSize + &#39;px Arial&#39;
    ctx.textAlign = &#39;center&#39;
    ctx.fillStyle = fillStyle
    ctx.fillText(&#39;贴&#39;, cx, cy + fontSize * 0.3)
}

text(&#39;#29a3fe&#39;)

登录后复制

效果如下：

第二步：绘制蓝色的波浪

var waveSize = size / 6 // 波浪大小
var x = 0 // 波浪位置偏移大小

function curve() {
    ctx.beginPath()
    ctx.moveTo(cx - size + x + size / 2, cy)
    ctx.quadraticCurveTo(cx - size + size / 4 + x + size / 2, cy - waveSize, cx - size + size / 2 + x + size / 2, cy)
    ctx.quadraticCurveTo(cx - size + size * 3 / 4 + x + size / 2, cy + waveSize, cx - size + size + x + size / 2, cy)

    ctx.quadraticCurveTo(cx + size / 4 + x + size / 2, cy - waveSize, cx + size / 2 + x + size / 2, cy)
    ctx.quadraticCurveTo(cx + size * 3 / 4 + x + size / 2, cy + waveSize, cx + size + x + size / 2, cy)
    ctx.lineTo(cx + size + x + size / 2, canvas.height)
    ctx.lineTo(cx - size + x + size / 2, canvas.height)
    ctx.lineTo(cx - size + x + size / 2, cy)
    ctx.closePath()
}

ctx.fillStyle = &#39;#29a3fe&#39;
curve()
ctx.fill()

登录后复制

效果如下：

第三步：绘制白色的“贴”字

curve()
ctx.clip()
text(&#39;#f00&#39;)

登录后复制

第一句代码 curve() 创建了一个波浪形状的路径，和第三步不同的是，这里并没有使用 ctx.fill() 填充路径，而是使用了 ctx.clip() 裁剪路径，这样的话，后面绘制的路径（包括文字）只有在剪裁区域内才能显示。

为了和背景色区分开来，我把“贴”字改成红色。

效果如下：

第四步：绘制运动的波浪

function loop(){
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    x -= 1.5
    x = x % size

    ctx.save()

    circle()
    ctx.stroke()
 
    ctx.fillStyle = &#39;#29a3fe&#39;
    curve()
    ctx.fill()

    ctx.restore()

    requestAnimationFrame(loop)
}
loop()

登录后复制

效果如下：

第五步：整合前面的内容

效果如下：

第六步：剪裁圆形

把第零步的：

circle()
ctx.stroke()

登录后复制

改成：

circle()
ctx.clip()

登录后复制

这样就能把圆形外面的形状剪裁掉，然后就大功告成了。

最后，附上完整源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            height: 100%;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById(&#39;canvas&#39;)
    var ctx = canvas.getContext(&#39;2d&#39;)
    canvas.width = 500
    canvas.height = 500

    var size = canvas.width / 4 // 圆的大小
    var cx = canvas.width / 2 // 圆中心点 x 坐标
    var cy = canvas.height / 2 // 圆中心点 y 坐标
    var waveSize = size / 6 // 波浪大小
    var x = 0 // 波浪位置偏移大小

    function circle() {
        ctx.beginPath()
        ctx.arc(cx, cy, size / 2, 0, 2 * Math.PI)
    }

    function curve() {
        ctx.beginPath()
        ctx.moveTo(cx - size + x + size / 2, cy)
        ctx.quadraticCurveTo(cx - size + size / 4 + x + size / 2, cy - waveSize, cx - size + size / 2 + x + size / 2, cy)
        ctx.quadraticCurveTo(cx - size + size * 3 / 4 + x + size / 2, cy + waveSize, cx - size + size + x + size / 2, cy)

        ctx.quadraticCurveTo(cx + size / 4 + x + size / 2, cy - waveSize, cx + size / 2 + x + size / 2, cy)
        ctx.quadraticCurveTo(cx + size * 3 / 4 + x + size / 2, cy + waveSize, cx + size + x + size / 2, cy)
        ctx.lineTo(cx + size + x + size / 2, canvas.height)
        ctx.lineTo(cx - size + x + size / 2, canvas.height)
        ctx.lineTo(cx - size + x + size / 2, cy)
        ctx.closePath()
    }

    function text(fillStyle) {
        var fontSize = size / 250 * 120
        ctx.font = &#39;bold &#39; + fontSize + &#39;px Arial&#39;
        ctx.textAlign = &#39;center&#39;
        ctx.fillStyle = fillStyle
        ctx.fillText(&#39;贴&#39;, cx, cy + fontSize * 0.3)
    }

    function loop(){
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        x -= 1.5
        x = x % size

        ctx.save()

        circle()
        ctx.clip()

        text(&#39;#29a3fe&#39;)

        ctx.fillStyle = &#39;#29a3fe&#39;
        curve()
        ctx.fill()

        curve()
        ctx.clip()

        text(&#39;#fff&#39;)

        ctx.restore()

        requestAnimationFrame(loop)
    }
    loop()
</script>
</body>
</html>

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7662

CakePHP 教程

1393

C# 教程

1205

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

VMware Horizon Client无法打开[修复] Feb 19, 2024 pm 11:21 PM

VMwareHorizon客户端可帮助您便捷地访问虚拟桌面。然而，有时虚拟桌面基础设施可能会遇到启动问题。本文将讨论当VMwareHorizon客户端未能成功启动时，您可以采取的解决方法。为什么我的VMwareHorizon客户端无法打开？在配置VDI时，如果未打开VMWareHorizon客户端，可能会出现错误。请确认您的IT管理员提供了正确的URL和凭据。如果一切正常，请按照本指南中提到的解决方案解决问题。修复未打开的VMWareHorizon客户端如果您的Windows计算机上未打开VMW

VMware Horizon客户端在连接时冻结或停滞[修复] Mar 03, 2024 am 09:37 AM

在使用VMWareHorizon客户端连接到VDI时，我们可能会遇到应用程序在身份验证过程中冻结或连接阻塞的情况。本文将探讨这个问题，并提供解决这种情况的方法。当VMWareHorizon客户端出现冻结或连接问题时，您可以采取一些措施来解决这一问题。修复VMWareHorizon客户端在连接时冻结或卡住如果VMWareHorizon客户端在Windows11/10上冻结或无法连接，请执行下面提到的解决方案：检查网络连接重新启动Horizon客户端检查Horizon服务器状态清除客户端缓存修复Ho

PHP MQTT客户端开发指南 Mar 27, 2024 am 09:21 AM

MQTT（MessageQueuingTelemetryTransport）是一种轻量级的消息传输协议，通常用于物联网设备之间的通信。PHP是一种常用的服务器端编程语言，可以用来开发MQTT客户端。本文将介绍如何使用PHP开发MQTT客户端，并包含以下内容：MQTT协议的基本概念PHPMQTT客户端库的选取和使用实例：使用PHPMQTT客户端发布和

百度网盘网页无法启动客户端怎么解决？ Mar 13, 2024 pm 05:00 PM

　　很多朋友下载文件会先在网页上浏览，然后转入客户端下载。但有时用户会遇到百度网盘网页无法启动客户端的问题。针对这个问题，小编为大家准备了百度网盘网页无法启动客户端的解决办法，有需要的小伙伴可以参考一下哦。　　解决办法　　1、可能百度网盘不是最新版，手动打开百度网盘客户端，点击右上角的设置按钮，再点击版本升级。　　如无更新，则会有如下提示，若有更新，请按照提示进行更新。　　2、可能禁用了百度网盘的检测服务程序　　有可能使我们自己手动或者使用安全软件自动禁用了百度网盘的检测服务程序。　　请查看一下

百度贴吧怎么删除自己的帖子删除自己的帖子方法一览 Mar 12, 2024 pm 05:25 PM

　　我们在使用这款平台的时候应该都对于上面的一些功能都有了解，无论是在哪一些方面我们都能看到上面是拥有着超多的一些帖子的出现，当然我们自己也是可以在上面发布一些帖子什么的，所以每一次都会让你们感受到不同方面的一些选择都是可以的，所以今日小编为了能够更好的知道上面的功能运用，也为了保障我们对于帖子方面的一些质量，直接就来删除掉上面的一些帖子什么的都是可以的，不过你们不知道操作的话，今日小编就来给你们好好的讲解一下如何去进行删除，有兴趣想法的朋友们，现在就和小编一起来看看吧，我相信你会喜欢的。　　删

html2canvas有哪些版本 Aug 22, 2023 pm 05:58 PM

html2canvas的版本有html2canvas v0.x、html2canvas v1.x等。详细介绍：1、html2canvas v0.x，这是html2canvas的早期版本，目前最新的稳定版本是v0.5.0-alpha1。它是一个成熟的版本，已经被广泛使用，并且在许多项目中得到了验证；2、html2canvas v1.x，这是html2canvas的新版本。

学习canvas框架详解常用的canvas框架 Jan 17, 2024 am 11:03 AM

探索Canvas框架：了解常用的Canvas框架有哪些，需要具体代码示例引言：Canvas是HTML5中提供的一个绘图API，通过它我们可以实现丰富的图形和动画效果。为了提高绘图的效率和便捷性，许多开发者开发了不同的Canvas框架。本文将介绍一些常用的Canvas框架，并提供具体代码示例，以帮助读者更深入地了解这些框架的使用方法。一、EaselJS框架Ea

uniapp实现如何使用canvas绘制图表和动画效果 Oct 18, 2023 am 10:42 AM

uniapp实现如何使用canvas绘制图表和动画效果，需要具体代码示例一、引言随着移动设备的普及，越来越多的应用程序需要在移动端展示各种图表和动画效果。而uniapp作为一款基于Vue.js的跨平台开发框架，提供了使用canvas绘制图表和动画效果的能力。本文将介绍uniapp如何使用canvas来实现图表和动画效果，并给出具体的代码示例。二、canvas

See all articles

利用Canvas模仿百度贴吧客户端loading小球的方法

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题