😀😬😁😂😃😄😅😆😇😉😊🙂☺️😋😌😍😘😗😙😚😜😝😛😎😏😶😐😑😒😳😞😟😠😡😔😕🙁☹️😣😖😫😩😤😮😱😨😰😯😦😧😢😥😪😓😭😵😲😷😴💤💩😈👿👹👺💀👻

管理用リンク:

1コメ(業務連絡)

2コメ(業務連絡)

3コメ

スクリプトを見る

😎 yokunaine

よくないね 😎

よくないね

👎よくないね新バージョン開発中！ 👎よくないね集計

✉新着メッセージ(全て見る)✉

2017/04/26 タイトルの前後で関連性がないという編集リクエストがたくさん飛んできたので最初の状態にもどしました！

2017/04/26 技術系のタグをつけたのはプログラミングの話だからね！文句は運営に言ってね！

2017/04/26
スクリーンショット 2017-04-26 8.53.07.png

2017/04/25コードだよ

<!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>

2017/04/25デモ追加❤️

https://jsfiddle.net/7p4wrhfr/

2017/04/26 数あるゴミ記事を差し置いてこの記事を限定公開にするとはさすが！！技術的内容が皆無な記事よりはコード貼ってあったりして「ぷろぐらみんぐと関係のある投稿」ではあるんだけどなー？

漢はコードで語れと言われてきた2020年代の今も説明文を書かなきゃいけないのびっくりだけど、わざわざ説明してあげるね！

トップの画像にあるような若干立体的な文字の表面にドット模様が動いてるロゴをcanvasで作ろうと思った時、どうやって表現するかのお話。

立体っぽく見せるために斜めにずらした灰色の文字を３回描画します。

 for (var i = 1; i <= 3; i++) {
     ctx.fillText(text.innerText, x + i, y + (i/2))
 }

表面の文字を描画します。
```
 ctx.fillText(text.innerText, x, y)
```

別のキャバスにドット模様を描きます。

 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をずらして動いているように見せてるよ！

✉新着メッセージ(全て見る)✉

Recent post