HTML5-Canvas implementiert den Beispielcode des Gewinnerkarussells

Der Inhalt dieses Artikels befasst sich mit dem Beispielcode des HTML5-Canvas zur Implementierung des Gewinnerkarussells. Ich hoffe, dass er für Sie hilfreich ist.

Vor kurzem lerne ich, Animationen mit Leinwand zu machen, also habe ich mir zum Üben einen Plattenspieler geschrieben.
Das letzte einfache Ergebnisbild (das mittlere ist der rotierende Zeiger, der äußere Kreis ist das Bild, ich bin zu faul, es zu schreiben, hahaha)

Der Code ist sehr einfach, alles kommentiert, gehen Sie einfach zum Code, 嘤嘤嘤

html

  <canvas>您的浏览器不支持canvas</canvas>
  <img  src="/static/imghw/default1.png" data-src="./zp.jpg" class="lazy" alt="HTML5-Canvas implementiert den Beispielcode des Gewinnerkarussells" >

css

<style>
    #canvas{
      position: absolute;
      left: 230px;
      top: 230px;
    }
    #img{
      width: 600px;
      height: 600px;
    }
  </style>

js

  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  //设定画布和宽
  canvas.width=140;
  canvas.height=140;
  var then = Date.now();
  var now;//利用时间差来控制转盘最小转动时间
  var first_deg=0;//用来记录转动的角度
  var rotate_deg=0;//每次转动的角度，用来实现变速运动
  var end_deg =85;//中奖角度
  var speedUp = true;//判断是否在加速阶段
  var f;

  // 因为canvas的rotate函数是根据左上角坐标（0,0）来旋转的，所以移动画布
  context.translate(70,70);
  function draw(){
    context.clearRect(-70, -70, 70, 70);
    context.beginPath();
    context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
    context.moveTo(-50,0);
    context.lineTo(50,0);
    context.lineTo(0,-70);
    context.rotate(rotate_deg*Math.PI/180);
    context.closePath();
    context.fillStyle='red';
    context.fill();    
  }
// 将运动分为3段，加速，匀速，减速
  function loop(){

    //循环调用，产生动画效果
    f = window.requestAnimationFrame(loop);
    now = Date.now();

    //开始加速转动，转到速度为20就不加速了，至于为什么是20，看起来舒服而已
    if(rotate_deg 2000){

      //如果下面设置的是固定角度，那这里的最小速度建议为1，因为每次转动角度过大，一圈很可能错过中奖的角度，导致转很多圈。
      if(rotate_deg>=2){
        speedUp = false;
        rotate_deg -=1;
      }
      //设置中奖区间为+-5度（设置固定角度会让动画有点难看）
      if(first_deg%360>=end_deg-5&&first_deg%360<p><strong>Schließlich </strong></p><p>Das Problem bei diesem relativ großen Drehteller besteht darin, dass bei relativ kleinem Gewinnintervall das Drehen nach dem Abbremsen länger dauert und lange dauert mit der niedrigsten Geschwindigkeit drehen, bevor Sie anhalten. Wenn das Intervall groß ist, stoppt es plötzlich, der Verzögerungseffekt ist nicht offensichtlich und es sieht optisch seltsam aus. </p><p> Empfohlene verwandte Artikel: </p><p><a href="http://www.php.cn/html5-tutorial-407703.html" target="_blank" title="html5 canvas用来绘制弧形的代码实现">HTML5-Canvas-Code-Implementierung zum Zeichnen von Bögen</a></p><p class="post-topheader custom- pt0"><a href="http://www.php.cn/html5-tutorial-407589.html" target="_blank" title="HTML5实现魔方游戏的代码">HTML5-Code-Implementierung für das Rubik's Cube-Spiel</a> </p><p class="mb20"><a href="http://www.php.cn/html5-tutorial-407331.html" target="_blank" title="HTML5结合互联网+ 实现的3D隧道（附代码）">HTML5 kombiniert mit Internet+ zur Realisierung eines 3D-Tunnels (mit Code) </a></p>

Das obige ist der detaillierte Inhalt vonHTML5-Canvas implementiert den Beispielcode des Gewinnerkarussells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!