JSFiddle - React, Tailwind, and code Playground

by Vitaliy Koval

HTML

<canvas id="tutorial-7" width="100" height="100" style="transform:rotate(-90deg)">
 Ваш браузер не поддерживает CANVAS
</canvas>

CSS

canvas { 
 
  display:block;
}

JavaScript

Number.prototype.toRad = function () { return this * Math.PI / 180; }
var num = 0;
var qwerty = function(){
  setTimeout(function(){
    num++;
    drawOnCanvas7(num);
    if(num<=70){
      qwerty();
    }
  }, 100);
}
qwerty();

function drawOnCanvas7(v){
	v = parseInt(v);
	v = v>100?100:v<=0?0:v;
  var onePrc = 360/100;
  v = v * onePrc;
  
	var canvas2 = document.getElementById('tutorial-7');
  canvas2.width = 210;
	canvas2.height = 210;
  var ctx = canvas2.getContext("2d");
  if(ctx){
  	
  
  
    ctx.lineWidth = 5;
    ctx.strokeStyle = "black";
    
    ctx.save();
    ctx.strokeStyle = "yellow";
    ctx.beginPath();
  	ctx.arc(105, 105, 100, (0).toRad(), (v).toRad());

    ctx.stroke();
  }
}