忍者ブログ

Memeplexes

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

[PR]

×

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

ブログで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 = "http://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回]

PR

ブログで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回]

ブログでHTML5 Canvas パスの線

太さ変更
<canvas id="drawLineSegmentWithWidthCanvas" width="300" height="200"></canvas>
<script>
    (function () {
        var canvas = document.getElementById("drawLineSegmentWithWidthCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(300, 200);
        context.stroke();
    })();
</script>



context.lineWidth

このプロパティは、線の太さを司ります。
パスストロークの色
<canvas id="drawColoredLineSegmentCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawColoredLineSegmentCanvas");
        var context = canvas.getContext("2d");
        context.strokeStyle = "rgb(0, 0, 255)";
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(300, 200);
        context.stroke();
    })();
</script>


context.strokeStyleプロパティは、パスのストロークを描くときのスタイルを司ります。
つまり線の描き方を決めるのです。
使えるスタイルはfillStyleプロパティと同じです。




拍手[0回]