• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
PHP中文网
帮助6

前言

最近看到两个好玩的 demo,效果图如下:

学新通技术网

学新通技术网

这是我实现的效果:

学新通技术网

实现原理

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

第零步:画一个圆

源码如下:

运行效果如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度贴吧客户端Loading小球</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas     height="500"></canvas>
<script>
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')
    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 = 'bold '   fontSize   'px Arial'
    ctx.textAlign = 'center'
    ctx.fillStyle = fillStyle
    ctx.fillText('贴', cx, cy   fontSize * 0.3)
}

text('#29a3fe')

效果如下:

学新通技术网

第二步:绘制蓝色的波浪

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 = '#29a3fe'
curve()
ctx.fill()

效果如下:

学新通技术网

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

curve()
ctx.clip()
text('#f00')

第一句代码 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 = '#29a3fe'
    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     height="500"></canvas>
<script>
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')
    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 = 'bold '   fontSize   'px Arial'
        ctx.textAlign = 'center'
        ctx.fillStyle = fillStyle
        ctx.fillText('贴', 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('#29a3fe')

        ctx.fillStyle = '#29a3fe'
        curve()
        ctx.fill()

        curve()
        ctx.clip()

        text('#fff')

        ctx.restore()

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

html5使用html2canvas实现浏览器截图

HTML5 canvas绘制五角星的方法

html5使用canvas实现跟随光标跳动的火焰效果

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tangbjiai
系列文章
更多 icon
同类精品
更多 icon
继续加载