忍者ブログ

Memeplexes

プログラミング、3DCGとその他いろいろについて

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


ブログでHTML5 Canvas テキスト

テキストの描画
テキストを描くこともできます。

<canvas id="drawTextCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawTextCanvas");
        var context = canvas.getContext("2d");
        context.fillText("Hello world!", 20, 30);
    })();
</script>



context.fillText(text, x, y, maxWidth);

textはキャンバスに描かれるテキストです。
xはテキストが描かれはじめるx座標です。
yはテキストが描かれはじめるy座標です。
maxWidthはテキストのピクセル数の最大横幅です。これはオプションです。


フォント
フォントを変更することもできます。
<canvas id="drawFontChangedTextCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawFontChangedTextCanvas");
        var context = canvas.getContext("2d");
        context.font = "30px Arial";
        context.fillText("Hello world!", 20, 30);
    })();
</script>



context.fontプロパティは、フォントを設定します。

テキストの横幅
テキストの横幅を測ることができます。
<canvas id="drawMeasuredTextCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawMeasuredTextCanvas");
        var context = canvas.getContext("2d");
        context.font = "30px Arial";
        var text = "Hello World!";
        var size = context.measureText(text);
        context.fillRect(0, 0, size.width, 30);
        context.fillStyle = "rgb(0, 255, 255)";
        context.fillText(text, 0, 30);
    })();
</script>



context.measureText(text).widthは、テキストの横幅を表します。




拍手[0回]

PR

ブログでHTML5 Canvas 画像

画像を描く
<canvas id="drawImageCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawImageCanvas");
        var context = canvas.getContext("2d");
        var image = new Image();
        image.onload = function () {
            context.drawImage(image, 30, 20);
        };
        image.src = "https://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1439584363";
    })();
</script>



context.drawImageには、3つの呼び出し方があります。

context.drawImage(image, x, y);
context.drawImage(image, x, y, width, height);
context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, x, y, width, height);

imageは描画するイメージです。
xはキャンバス上のx座標で、イメージが描かれる場所です。
yはキャンバス上のy座標で、イメージが描かれる場所です。

widthは描かれるイメージの横幅です。
heightは描かれるイメージの縦幅です。

sourceXは元イメージのx座標で、そこから描かれます。
sourceYは元イメージのy座標で、そこから描かれます。
sourceWidthは描く元イメージをクリップする横幅です。
sourceHeightは描く元イメージをクリップする縦幅です。





拍手[0回]


ブログでHTML5 Canvas 影

影を描く

自動的に影を描くこともできます。
<canvas id="drawShadowCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawShadowCanvas");
        var context = canvas.getContext("2d");
        context.shadowOffsetX = 20;
        context.shadowOffsetY = 10;
        context.shadowColor = "rgb(0, 0, 0)";
        context.fillStyle = "rgb(0, 0, 255)";
        context.fillRect(30, 30, 200, 100);
    })();
</script>



context.shadowOffsetX

は、影のx軸方向のオフセットです。


context.shadowOffsetY

は、影のy軸方向のオフセットです。


context.shadowColor

は、影の色です。
"rgba(0, 0, 0, 100)"というふうにしてもいいかも知れません。


影のぼかし

影はぼかすこともできます。
<canvas id="drawBlurredShadowCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawBlurredShadowCanvas");
        var context = canvas.getContext("2d");
        context.shadowOffsetX = 20;
        context.shadowOffsetY = 10;
        context.shadowColor = "rgb(0, 0, 0)";
        context.shadowBlur = 5;
        context.fillStyle = "rgb(0, 0, 255)";
        context.fillRect(30, 30, 200, 100);
    })();
</script>



context.shadowBlur

は、影のぼかしレベルです。






拍手[0回]


ブログでHTML5 Canvas 円

円弧
前回までは直線を描いていました。
今回は曲線っぽいものを描いてみましょう。
<canvas id="drawArcCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawArcCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.arc(100, 100, 100, 0, Math.PI, false);
        context.stroke();
    })();
</script>



context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

xは円の中心のx座標です。
yは円の中心のy座標です。
radiusは円の半径です。
startAngleはスタート地点の角度です。単位はラジアンです(0=0度、Math.PI=180度)。
endAngleは終点の角度です。単位はラジアンです。
counterClockwiseは省略可能です。描画が反時計回りになるか、時計回りになるかを指定します。falseなら時計回りで、trueなら反時計回りです。



円を描くには終点の角度がスタート地点の角度に追いつくようにします。
つまり終点の角度をMath.PI * 2(360度)にするのです。
<canvas id="drawCircleCanvas" width="300" height="200"></canvas>
<script>
    (function () {
        var canvas = document.getElementById("drawCircleCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.arc(100, 100, 100, 0, Math.PI * 2, false);
        context.stroke();
    })();
</script>





拍手[0回]


ブログでHTML5 Canvas パスを塗りつぶす

塗りつぶす
塗りつぶすこともできます。
<canvas id="drawFilledTriangleCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawFilledTriangleCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(150, 0);
        context.lineTo(300, 200);
        context.lineTo(0, 200);
        context.lineTo(150, 0);
        context.fill();
    })();
</script>







context.fill();

は、現在のパスを使って塗りつぶします。
デフォルトの色は黒です。
fillStyleプロパティを使うと塗りつぶすスタイルを、別の色やグラディエントなどに変更できます。
もしパスが閉じていなければ無理やり閉じて塗りつぶします。



拍手[0回]