Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

基本的なHTML5キャンバスアニメーションを実行します

HTML5キャンバスは、画像を描画して完全に消去するために必要なメソッドを提供します。 JavaScriptの助けを借りて、HTML5キャンバス上で優れたアニメーションをシミュレートできます。

例

次のコードを実行して、基本的なHTML5キャンバスアニメーションを実行することができます-

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         var pattern= new Image();
         function animate(){
            pattern.src = '/html5/images/pattern.jpg';
            setInterval(drawShape, 100);
         }
         function drawShape(){
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
           
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext){
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               ctx.fillStyle = 'rgba(0,0,0,0.4)';
               ctx.strokeStyle = 'rgba(0,153,255,0.4)';
               ctx.save();
               ctx.translate(150,150);
               
               var time = new Date();
               ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
               ctx.translate(0,28.5);
               ctx.drawImage(pattern,-3.5,-3.5);
               ctx.restore();
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   <body onload="animate();">
      <canvas id="mycanvas" width="400" height="400"></canvas>
   </body>
</html>

  1. キャンバスHTML5を使用して星を描く方法は？

    HTMLキャンバスへの描画は、JavaScriptを使用して行います。キャンバスに描画する前に、HTML DOMメソッドgetElementById（）およびgetContext（）を使用します。 HTMLで星を描くには、canvas要素を使用します。 キャンバスでは、lineTo（）メソッドを使用して星を描画します。 lineTo（）メソッドには、描画に役立つように線を配置するxおよびyパラメータ値が含まれています。 HTMLドキュメントにキャンバスを描画するには： 例 次のコードを実行して、HTML5キャンバスを使用して星を描くことができます <!DOCTYPE HTML&

  2. HTML5キャンバスで画像を使用する方法は？

    HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 HTML5キャンバスで画像を使用するには、drawImage（）メソッドを使用します。このメソッドは、指定された画像をキャンバスに描画します。 次のコードを実行して、HTMLCanvasで画像を使用する方法を学ぶことができます。ここで、画像は画像またはキャンバスオブジェクトへの参照です。 xとyは、画像を配置するターゲットキャンバス上の座標を形成します。 例 <!DOCTYPE HTML> <html>