HTML5 キャンバスを使用して均一な動きを実現する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

HTML5 キャンバスを使用して均一な動きを実現する方法

一个新手

Oct 09, 2017 am 10:19 AM

canvas h5 html5

等速運動: 直線的に移動する物体を指し、等時間間隔における物体の変位は等しい。実際には等速直線運動であり、その特徴は加速度が0であることです。定義から、等しい時間間隔内では速度の大きさと方向が同じであることがわかります。

<head>
    <meta charset=&#39;utf-8&#39; />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                x = 0;
            function drawBall( x, y, cxt ){
                cxt.fillStyle = &#39;#09f&#39;;
                cxt.beginPath();
                cxt.arc( x, y, 20, 0, 2 * Math.PI );
                cxt.closePath();
                cxt.fill();
            }
            ( function linear(){
                oGc.clearRect( 0, 0, width, height );
                drawBall( x, height / 2, oGc );
                x += 2;
                console.log( x );
                requestAnimationFrame( linear );
            } )();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
</body>

ログイン後にコピー

上記の例では、半径 20 ピクセルの小さなボールが、x=0、y=キャンバスの高さの半分からフレームごとに 2 ピクセルの速度で右に均一に移動できます。

小さなボールをカプセル化できます。ボールをオブジェクトに追加:

ball.js ファイル:

function Ball( x, y, r, color ){
    this.x = x || 0;
    this.y = y || 0;
    this.radius = r || 20;
    this.color = color || &#39;#09f&#39;;
}
Ball.prototype = {
    constructor : Ball,
    stroke : function( cxt ){
        cxt.strokeStyle = this.color;
        cxt.beginPath();
        cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
        cxt.closePath();
        cxt.stroke();
    },
    fill : function( cxt ){
        cxt.fillStyle = this.color;
        cxt.beginPath();
        cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
        cxt.closePath();
        cxt.fill();
    }
}

ログイン後にコピー

このボールオブジェクトは位置の半径と色をカスタマイズでき、2 つのレンダリング方法 (ストロークと塗りつぶし) をサポートしています

<head>
    <meta charset=&#39;utf-8&#39; />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script src="./ball.js"></script>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                ball = new Ball( 0, height / 2 );
            (function linear() {
                oGc.clearRect(0, 0, width, height);
                ball.fill( oGc );
                ball.x += 2;
                requestAnimationFrame(linear);
            })();
        }
    </script>
</head>

<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
</body>

ログイン後にコピー

スラッシュの均一な動き:

<head>
    <meta charset=&#39;utf-8&#39; />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script src="./ball.js"></script>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                ball = new Ball( 0, height );
            (function linear() {
                oGc.clearRect(0, 0, width, height);
                ball.fill( oGc );
                ball.x += 2;
                ball.y -= 1;
                requestAnimationFrame(linear);
            })();
        }
    </script>
</head>

<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
</body>

ログイン後にコピー

任意の方向への等速運動 (速度分解)

<head>
    <meta charset=&#39;utf-8&#39; />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script src="./ball.js"></script>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                ball = new Ball( 0, 0 ),
                speed = 5,
                vx = speed * Math.cos( 10 * Math.PI / 180 ),
                vy = speed * Math.sin( 10 * Math.PI / 180 );
                
            (function linear() {
                oGc.clearRect(0, 0, width, height);
                ball.fill( oGc );
                ball.x += vx;
                ball.y += vy;
                requestAnimationFrame(linear);
            })();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
</body>

ログイン後にコピー

以上がHTML5 キャンバスを使用して均一な動きを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。