指定要素の文字列をcanvasで描画

指定要素の文字列をcanvasで描画

HTML

<h1 class="effect">僕のホームページ</h1>

CSS

body { margin:0; padding:10px; background:#444; color:#fff;}

JavaScript

function textEffect() {

    var canvas = document.createElement("canvas"),
        c = canvas.getContext("2d");

    var target = document.getElementsByClassName("effect")[0];
    var text = "" + target.innerHTML;

    //設定
    var fontSize = 58;
    var lineHeight = 1.5; //相対値のみ可
    var textBlur = 6;
    var textColor = "#fff";
    var BGC = "#000";
    var fontFamily = "'小塚明朝 Pro R','KozMinPro-regular',serif";


    //設定項目から各部調整用の値を割り出す。
    var line = text.length;
    var maxTextLength = text.length;
    var font = "normal 400 " + fontSize + "px/" + lineHeight + " " + fontFamily;
    var cw = (fontSize + textBlur / 2) * maxTextLength,
        ch = fontSize * lineHeight + textBlur*2;
    canvas.setAttribute("width", cw);
    canvas.setAttribute("height", ch);

    //コンテキストの初期状態
    c.globalCompositeOperation = "source-over";
    c.globalAlpha = 1;
    c.shadowBlur = 0;

    //虹色ブラー
    function effect1() {
        c.save();
        c.clearRect(0, 0, cw, ch);
        //ブラー付きの淡色テキストを描画
        c.globalCompositeOperation = "source-over";
        c.font = font;
        c.fillStyle = textColor;
        c.shadowColor = textColor;
        c.shadowBlur = textBlur;
        c.shadowOffsetX = c.shadowOffsetY = 0;
        for (var i = 0; i < line; i++) { //複数回描画
            ・・c.fillText(text, textBlur/2, (fontSize * lineHeight) * (i + 1));
            c.fillText(text, textBlur/2, (fontSize * lineHeight) * (i + 1));
        }

        //描いたテキストにグラデーションを被せる
        c.globalCompositeOperation = "source-in";
        var style1 = c.createLinearGradient(0, 0, cw, ch * 0.25); //左肩から右脇(※Y軸ずれた)
        style1.addColorStop(0, "rgb(255, 0, 0)");
        style1.addColorStop(0.15, "rgb(255, 255, 0)");
        style1.addColorStop(0.3, "rgb(0, 255, 0)");
        style1.addColorStop(0.5, "rgb(0, 255, 255)");
        style1.addColorStop(0.65, "rgb(0, 0, 255)");
        style1.addColorStop(0.8, "rgb(255, 0, 255)");
        style1.addColorStop(1, "rgb(255, 0, 0)");
        c.fillStyle =...