HTML5 Canvasの基本的な使い方を紹介します。

この記事では、HTML5 Canvas の基本的な使い方を紹介します。必要な方は参考にしていただければ幸いです。

canvas は、HTML5 の新機能の中で私のお気に入りのタグです。非常に強力なので、あらゆる種類の興味深い特殊効果を実現できます。

1. Canvas の基本的な使い方

- インライン ブロック要素です
- デフォルトのサイズは 300 x 150 です。CSS ではスタイルを設定できず、タグでのみ設定できます。そのプロパティを内部に書き込みます。たとえば、幅 = 400、高さ = 300
- Canvas
var Canvas = document を取得します。 querySelector("canvas")
- ブラシ (コンテキスト) を取得します
var ctx = Canvas.getContext('2d')

2. Canvas は基本的なグラフィックスを描画します

長方形を塗りつぶす
ctx.fillRect(0,0,100,100)
fill:塗りつぶしに関連する
Rect:長方形を描く

塗りつぶしグラフィック設定スタイル
ctx.fillStyle = 'green '

ストローク長方形
ctx.ストロークRect(100,100,100,100)

ストロークグラフィック設定スタイル
ctx.ストロークスタイル = '白'
ctx.lineWidth = 100

キャンバス全体をクリアする
ctx.clearRect(0,0,canvas.width,canvas.height)

線分の描画
ctx.moveTo(100,100)
ctx.lineTo (100,100 )

Stroke
ctx.storm()

Fill
ctx.fill()-

始点と終点が接続されています
ctx . closePath()
ctx.save()Start
......
ctx.restore()End

3. Canvas Clock を使用します。目盛りや時針を含む時計を描画できます。毎秒動く目盛りは、Data オブジェクトを使用してタイマーを通じて随時更新できます。

var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    function move() {
        ctx.save()
            ctx.translate(300,300)
            //  初始化一些公共的样式
            ctx.lineCap = 'round'
            ctx.strokeStyle = 'black'
            ctx.lineWidth = 8
            ctx.scale(0.5,0.5)

            // 画外面的圆
            ctx.save();
                ctx.beginPath();
                ctx.strokeStyle = 'gold';
                ctx.arc(0,0,150,0,2*Math.PI);
                ctx.stroke();
            ctx.restore();

            // 画里面的刻度
            ctx.save()
                ctx.beginPath();
                for (var i=0; i <p>静止画は以下の通りです。 </p><p></p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/207/367/164/1542961926883406.png" title="1542961926883406.png" alt="HTML5 Canvasの基本的な使い方を紹介します。"></span>スクラッチカード効果</p><h4>キャンバスのグラフィック合成プロパティを使用すると、画像合成のような効果を得ることができます。特にスクラッチ カードに適用されます。 </h4>globalCompositeOperation プロパティは、ソース (新しい) イメージをターゲット (既存) イメージ上に描画する方法を設定または返します <p> ソース イメージ = キャンバス上に配置する予定の描画 <br> 宛先イメージ = 配置した描画キャンバスに描く<br><br></p><p   style="max-width:90%"></p><pre class="brush:php;toolbar:false">var  canvas = document.querySelector("canvas")
    var ctx = getCtx()
    log(ctx)
    ctx.fillStyle = 'yellow'
    ctx.fillRect(0,0,400,400)

    ctx.globalCompositeOperation = 'destination-out';

    // 鼠标按下
    canvas.onmousedown = function (event) {
        ctx.beginPath()
        ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
        ctx.fill()
        // 鼠标移动
        document.onmousemove = function (event) {
            ctx.beginPath()
            ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
            ctx.fill()
        }

        // 鼠标抬起
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null
        }
        return false
    }

以上がHTML5 Canvasの基本的な使い方を紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。