๐Ÿ˜€๐Ÿ˜ฌ๐Ÿ˜๐Ÿ˜‚๐Ÿ˜ƒ๐Ÿ˜„๐Ÿ˜…๐Ÿ˜†๐Ÿ˜‡๐Ÿ˜‰๐Ÿ˜Š๐Ÿ™‚โ˜บ๏ธ๐Ÿ˜‹๐Ÿ˜Œ๐Ÿ˜๐Ÿ˜˜๐Ÿ˜—๐Ÿ˜™๐Ÿ˜š๐Ÿ˜œ๐Ÿ˜๐Ÿ˜›๐Ÿ˜Ž๐Ÿ˜๐Ÿ˜ถ๐Ÿ˜๐Ÿ˜‘๐Ÿ˜’๐Ÿ˜ณ๐Ÿ˜ž๐Ÿ˜Ÿ๐Ÿ˜ ๐Ÿ˜ก๐Ÿ˜”๐Ÿ˜•๐Ÿ™โ˜น๏ธ๐Ÿ˜ฃ๐Ÿ˜–๐Ÿ˜ซ๐Ÿ˜ฉ๐Ÿ˜ค๐Ÿ˜ฎ๐Ÿ˜ฑ๐Ÿ˜จ๐Ÿ˜ฐ๐Ÿ˜ฏ๐Ÿ˜ฆ๐Ÿ˜ง๐Ÿ˜ข๐Ÿ˜ฅ๐Ÿ˜ช๐Ÿ˜“๐Ÿ˜ญ๐Ÿ˜ต๐Ÿ˜ฒ๐Ÿ˜ท๐Ÿ˜ด๐Ÿ’ค๐Ÿ’ฉ๐Ÿ˜ˆ๐Ÿ‘ฟ๐Ÿ‘น๐Ÿ‘บ๐Ÿ’€๐Ÿ‘ป๐Ÿ‘ฝ

  • 20
    ใ„ใ„ใญ
  • 8
    ใ‚ณใƒกใƒณใƒˆ



โœ‰ๆ–ฐ็€ใƒกใƒƒใ‚ปใƒผใ‚ธ(ๅ…จใฆ่ฆ‹ใ‚‹)โœ‰

2017/04/25ใƒ‡ใƒข่ฟฝๅŠ โค๏ธ

https://jsfiddle.net/7p4wrhfr/

2017/04/25ใ‚ณใƒผใƒ‰ใ ใ‚ˆ

jc.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
    <title>@JAVASCRIPT</title>
</head>
<body>
    <canvas width="360" height="60">
        <span style="
            font: 68px 'Bangers';
            color: #24f;
            text-shadow: 1px 0.5px 0 #888, 2px 1px 0 #888, 3px 1.5px 0 #888;
            font-weight: 100;
        ">@JAVASCRIPT</span>
    </canvas>
    <script>
        var span = 8
        var x = 10
        var y = 56
        var text = document.querySelector('span')
        var canvas = document.querySelector('canvas')
        var ctx = canvas.getContext('2d')
        ctx.font = text.style.font
        var canvas2 = document.createElement('canvas')
        canvas2.width = canvas.width
        canvas2.height = canvas.height
        ctx2 = canvas2.getContext('2d')
        ctx2.font = text.style.font
        ctx2.fillStyle = ctx2.shadowColor = "white"
        ctx2.shadowBlur = 1
        var offset = span
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.fillStyle = "#888"
            for (var i = 1; i <= 3; i++) {
                ctx.fillText(text.innerText, x + i, y + (i/2))
            }
            ctx.fillStyle = text.style.color
            ctx.fillText(text.innerText, x, y)
            ctx2.clearRect(0, 0, canvas2.width, canvas2.height)
            for (var i = 0; i < 7 * span; i+=span) {
                for (var j = 36; j < 36 + 22 * span*2; j += span*2) {
                    ctx2.fillRect(j - i, i, 1.6, 1.6)
                }
            }
            ctx2.globalCompositeOperation = "destination-in"
            ctx2.fillText(text.innerText, x-offset, y-offset)
            ctx2.globalCompositeOperation = "source-over"
            ctx2.drawImage(canvas2, 0, 0)
            ctx.drawImage(canvas2, offset, offset)
            offset = --offset || span 
        }
        draw()
        setInterval(draw, 100)
    </script>
</body>
</html>