【html5】canvas の基本ではない使い方【canvas】

よいち

html5 の canvas は非常に強力な描画ツールです。ちょこっと勉強すれば、簡単なお絵かきツールくらい自作できちゃいます。今回はその canvas の、三歩くらいずれた使い方を紹介したいと思います。

html の雛形は以下の通りで、 script タグの中に javascript を書いていきます。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="icon" width=48 height=48></canvas>
    <canvas id="plate" width=96 height=96></canvas>
    <canvas id="belt" width=192 height=48></canvas>
    <script type="text/javascript">
    </script>
</body>
</html>

・基本的な描画
まず基本的な描画を行ってみます。全体を黒で塗りつぶしたあと、赤で逆三角形を描きます。

let i_cvs = document.getElementById("icon")
let i_ctx = i_cvs.getContext("2d")
i_ctx.beginPath()
i_ctx.fillRect(0, 0, 48, 48)
i_ctx.fillStyle = "red"
i_ctx.beginPath()
i_ctx.moveTo( 0,  0)
i_ctx.lineTo(24, 48)
i_ctx.lineTo(48,  0)
i_ctx.closePath()
i_ctx.fill()

・canvas の内容を他の canvas に描画する
次は icon に描画した内容を plate に描画します。HTML5.JP のサンプルでは Image のインスタンスをソースとしていますが、 canvas 要素もソースとなりえます。 context の中にはさらに canvas 要素が存在し、それをソースとすることも可能です。せっかくなので clip も使ってみました。

let p_cvs = document.getElementById("plate")
let p_ctx = p_cvs.getContext("2d")
p_ctx.drawImage(i_cvs, 0, 0, 48, 48, 0, 0, 96, 96)
p_ctx.beginPath();
p_ctx.arc(72, 72, 24, 0, Math.PI * 2, false);
p_ctx.clip();
p_ctx.drawImage(i_ctx.canvas, 48, 48, 48, 48)

・canvas をパターンとして登録
canvas をパターンとして登録し、指定範囲をそのパターンで埋めることもできます。これも HTML5.JP のサンプルでは Image のインスタンスをソースとしていました。

let b_cvs = document.getElementById("belt")
let b_ctx = b_cvs.getContext("2d")
var ptn = b_ctx.createPattern(i_cvs, "")
b_ctx.fillStyle = ptn
b_ctx.beginPath();
b_ctx.rect(0, 0, 192, 48);
b_ctx.fill()

このように強力な canvas 要素ですが、利用される context が2d から webgl に移りつつある今、脚光を浴びる HTML5 という中でもレガシーな存在なってゆくのかなと思っちゃったりしてます…。

この記事が気に入ったらサポートをしてみませんか？