communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > html5 Canvas 图像动画的实现

html5 Canvas 图像动画的实现

伊谢尔伦
Libérer： 2016-12-10 09:32:03
original
1750 Les gens l'ont consulté

<span style="font-size:18px;"><!DOCTYPE html>
<head>
    <meta charset=utf-8>
    <title>PHP100 HTML5视频教程-canvas-吹气球效果</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <canvas id="php100" width="500" height="200" ></canvas>
    <br>  <!-- 画布 -->
    <script type="text/javascript">
       var canvas = document.getElementById(&#39;php100&#39;); //获取画布
       var p100=canvas.getContext("2d");  //设置模式
       var dir=0;       //设置线条起点
       var width=500;   //要清除的矩形的宽度
       var height=200;  //要清除的矩形的高度
       var exp=1; //像素移动的位置，正数向下，负数向上
       p100.strokeStyle = "rgba(255,0,0,1)"; //定义颜色
 function fff(){
    p100.clearRect(0,0,width,height); //清除原始图形 0 0  表示矩形的左上角的X Y轴坐标
    p100.fillStyle="red";//定义颜色
     p100.beginPath();//从新开始画，防止冲突重叠
     p100.arc(180,dir,dir,0,Math.PI*2,1); //x坐标，y坐标，半径，Math.PI是圆周率  半径也设置成圆点的位置就实现吹气球的效果
     p100.closePath();//结束画布，防止冲突重叠
     p100.fill();//结束渲染
     dir=dir+exp;   //向下移动
 if(dir==0 || dir==height){
   exp=exp*-1; //掉头位置//乘以负一用来调整线路方向
  }
}
//setInterval(code,millisec) 按照指定的周期来调用函数,返回值为定时器的ID值 赋值给一个变量
//clearInterval(idofsetInterval)取消由setInterval()方法设置的定时器。
</script>
<button onclick="tt=setInterval(fff,20);">开始</button>
<button onclick="clearInterval(tt);">停止</button>
</body>
</html>
</span>
Copier après la connexion


Étiquettes associées：
html5
source：php.cn
Article précédent：使用html5的FormData对象,通过 Ajax表单异步提交文件数据 Article suivant：HTML语言剖析之Html简介
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal