HTML5でのCanvasスクリーンセーバーアニメーションの実装コード

この記事の内容はHTML5でのCanvasスクリーンセーバーアニメーションの実装コードです。必要な方は参考にしていただければ幸いです。

早速、コードにいきましょう

nbsp;html>


    <meta>
    <title>Title</title>
    
    
    <canvas>
    </canvas>
    
    

プロジェクトの要件により、アニメーションはリアルタイムに更新されたデータを表示する必要があるため、通常のキャンバス描画とは異なります。ただし、html をキャンバスに直接描画することはできません。心配しないでください。方法はあります。

HTML コンテンツを描画するには、まず <foreignobject></foreignobject> 要素を使用して HTML コンテンツを含めてから、SVG 画像をキャンバスに描画する必要があります。 <foreignobject></foreignobject> 元素包含 HTML 内容，然后再将这个 SVG 图像绘制到你的 canvas 中。

夸张地说，这里唯一真正棘手的事情就是创建 SVG 图像。您需要做的所有事情是创建一个包含XML 字符串的 SVG，然后根据下面的几部分构造一个 Blob。

1. blob 对象的 MIME 应为 "image/svg+xml"。

2. 一个 <svg></svg> 元素。

3. 在 SVG 元素中包含的 <foreignobject></foreignobject> 元素。

4. 包裹到 <foreignobject></foreignobject>

   はっきり言って、ここで本当に難しいのは SVG 画像を作成することだけです。必要なのは、XML 文字列を含む SVG を作成し、次のセクションに従って Blob を構築することだけです。
BLOB オブジェクトの MIME は「image/svg+xml」である必要があります。

5. <svg></svg> 要素。

6. SVG 要素内に含まれる <foreignobject></foreignobject> 要素。

7. <foreignobject></foreignobject> でラップされた (フォーマットされた) HTML。
   

   上で述べたように、オブジェクト URL を使用すると、HTML を外部ソースからロードする代わりにインライン化できます。もちろん、ドメインが元のドキュメントと同じである限り (ドメインをまたがることはできません)、外部ソースを使用することもできます。

   　　//创建画布
       var Cans=document.getElementById("canvas");    
       var ctx=Cans.getContext("2d");    //设置全屏画布
       Cans.width=document.body.offsetWidth;
       Cans.height=document.body.offsetHeight;    
       var DOMURL,img,svg,url;
       initimg("AAA");//默认显示数据，一下代码参考https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
       function initimg(data) {        
       var data = '<svg>' +
               '<foreignobject>' +
               '<p>' +
               '</p>
   <p>' +
               ''+data+'</p>' +
               '' +
               '</foreignobject>' +
               '</svg>';
           DOMURL = window.URL || window.webkitURL || window;
           img = new Image();
           svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
           url = DOMURL.createObjectURL(svg);
           img.src = url;
       }    
       //每隔五秒刷新数据，随机从数组中取（实际情况当然是要从后台获取）
       var getdata = setInterval(function () {        
       var data=["BBB","CCC","DDD","EEE"]
           initimg(data[Math.floor(Math.random()*8)]);
       },5000)

   
   以下は、アニメーションの表示位置を制御し、アニメーションをトリガーし、アニメーションを閉じる方法です

   var raf;    
   var arror = [];    
   var running = false;    
   //绘制图形
       function createStar() {        
       return {
               x: 0,
               y: 0,
               vx: 0.7,
               vy: 0.7,//用来控制移动速度
               draw: function() {
                   ctx.drawImage(img, this.x, this.y);
                   DOMURL.revokeObjectURL(url);
               }
           }
       }    
       //清除
       function clear() {
           ctx.fillStyle = 'rgba(255,255,255,1)';
           ctx.fillRect(0,0,canvas.width,canvas.height);
       }    
       //判断图形坐标是否超出画布范围
       function draw() {
           clear();
           arror.forEach(function(ball, i){
               ball.draw();
               ball.x += ball.vx;
               ball.y += ball.vy;            
               if (ball.y + ball.vy+50 > canvas.height || ball.y + ball.vy  canvas.width || ball.x + ball.vx <p>関連する推奨事項: <a href="http://www.php.cn/js-tutorial-393133.html" target="_self"></a></p>HTML5キャンバスとリバウンドアニメーションに基づいたアニメーション特殊効果をロードします🎜🎜🎜🎜🎜H5キャンバスを使用してホラーを作成しますアニメーション🎜 🎜🎜🎜🎜動的な時計アニメーションを実装するためのcanvasとJS🎜🎜

以上がHTML5でのCanvasスクリーンセーバーアニメーションの実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。