关注我们

HTML5 中的 Canvas Animation函数

HTML5 canvas提供了绘制图像并将其完全擦除的必要方法，无涯教程可以利用Javascript帮助在HTML5画布上模拟良好的动画。

以下是两个重要的Javascript方法，可用于为画布上的图像设置动画-

无涯教程网

方法和描述
setInterval(callback，time); 此方法在给定的时间毫秒后重复执行。
setTimeout(callback，time); 此方法仅在给定的时间毫秒后执行一次。

方法和描述

setInterval(callback，time);

此方法在给定的时间毫秒后重复执行。

setTimeout(callback，time);

此方法仅在给定的时间毫秒后执行一次。

以下是一个简单的示例，它将反复旋转小图像-

链接：https://www.learnfk.comhttps://www.learnfk.com/html5/canvas-animation.html

来源：LearnFk无涯教程网

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type="text/javascript">
         var pattern=new Image();
         
         function animate() {
            pattern.src='/html5/images/pattern.jpg';
            setInterval(drawShape, 100);
         }
         
         function drawShape() {
            
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
            
            //确保不支持画布时不执行
            if (canvas.getContext) {
            
               //使用 getContext 使用画布进行绘图
               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>

上面的Example将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Elasticsearch核心技术与实战 -〔阮一鸣〕

分布式技术原理与算法解析 -〔聂鹏程〕

中间件核心技术与实战 -〔丁威〕

Web 3.0入局攻略 -〔郭大治〕

好记忆不如烂笔头。留下您的足迹吧 :)