Nous devrions tous savoir que Canvas peut être utilisé pour dessiner diverses images sur le navigateur. Alors, comment utiliser Canvas pour dessiner un cercle ? Cet article vous présentera trois méthodes d'implémentation dynamique d'utilisation de Canvas pour dessiner un cercle.
Tout d'abord, regardons la première méthode pour dessiner un cercle sur toile : utiliser la méthode canvas arc() pour dessiner dynamiquement un cercle
arc() méthode pour créer un arc/courbe (pour créer des cercles ou des cercles partiels).
Idée : limitez-le en définissant l'angle de départ et l'angle de fin, puis obtenez l'effet d'animation en accumulant des variables d'angle temporaires.
Syntaxe : context.arc(x,y,r,sAngle,eAngle,counterclock);
Code d'implémentation du dessin de cercle sur toile :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#myCanvas{
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
<script type="text/javascript">
//方法一：arc 动态画圆
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var mW = c.width = 300;
var mH = c.height = 300;
var lineWidth = 5;
var r = mW / 2; //中间位置
var cR = r - 4 * lineWidth; //圆半径
var startAngle = -(1 / 2 * Math.PI); //开始角度
var endAngle = startAngle + 2 * Math.PI; //结束角度
var xAngle = 1 * (Math.PI / 180); //偏移角度量
var fontSize = 35; //字号大小
var tmpAngle = startAngle; //临时角度变量
//渲染函数
var rander = function(){
if(tmpAngle >= endAngle){
return;
}else if(tmpAngle + xAngle > endAngle){
tmpAngle = endAngle;
}else{
tmpAngle += xAngle;
}
ctx.clearRect(0, 0, mW, mH);
//画圈
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#1c86d1';
ctx.arc(r, r, cR, startAngle, tmpAngle);
ctx.stroke();
ctx.closePath();
//写字
ctx.fillStyle = '#1d89d5';
ctx.font= fontSize + 'px Microsoft Yahei';
ctx.textAlign='center';
ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
requestAnimationFrame(rander);
};
rander();
</script>
</body>
</html>Copier après la connexion
Rendu du cercle de dessin sur toile :
Ensuite, jetons un coup d'œil au deuxième cercle de dessin sur toile méthode : utilisez la méthode canvas rotate() pour dessiner un cercle.
méthode rotate() pour faire pivoter le dessin actuel.
Idée : en redéfinissant les coordonnées du point du cercle comme (0, 0), puis en faisant pivoter le graphique dans la plage spécifiée, dessinez un seul point.
Syntaxe : context.translate(x,y);
Code d'implémentation du dessin de cercle sur toile :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#myCanvas{
margin: 0 auto;
display: block;
}
</style></head><body>
<canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
<script type="text/javascript">
//方法二：rotate() 动态画圆
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var mW = c.width = 300;
var mH = c.height = 300;
var lineWidth = 5;
var r = mW / 2; //中间位置
var cR = r - 4 * lineWidth; //圆半径
var startAngle = -(1 / 2 * Math.PI); //开始角度
var endAngle = startAngle + 2 * Math.PI; //结束角度
var xAngle = 1 * (Math.PI / 180); //偏移角度量
var fontSize = 35; //字号大小
var tmpAngle = startAngle; //临时角度变量
//渲染函数
var rander = function(){
if(tmpAngle >= endAngle){
return;
}else if(tmpAngle + xAngle > endAngle){
tmpAngle = endAngle;
}else{
tmpAngle += xAngle;
}
ctx.clearRect(0, 0, mW, mH); //画圈
ctx.save();
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#1c86d1';
ctx.translate(r, r); //重定义圆点
ctx.rotate(-Math.PI); //最上方为起点
for(var i = 0; i <= tmpAngle - startAngle; i += xAngle){ //绘图
ctx.moveTo(0, cR - lineWidth);
ctx.lineTo(0, cR);
ctx.rotate(xAngle); //通过旋转角度和画点的方式绘制圆
}
ctx.stroke();
ctx.closePath();
ctx.restore(); //写字
ctx.fillStyle = '#1d89d5';
ctx.font= fontSize + 'px Microsoft Yahei';
ctx.textAlign='center';
ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
requestAnimationFrame(rander);
};
rander();
</script>
</body>
</html>Copier après la connexion
Rendu du dessin de cercle sur toile :
Enfin, regardons la troisième méthode pour dessiner un cercle sur toile : Utilisez Obtenir le coordonnées d'un cercle pour dessiner un cercle
Idée : utiliser sin() et cos() pour stocker la position des coordonnées entre l'angle de départ et l'angle de fin dans un tableau selon un certain décalage d'angle, puis dessinez en fonction des points de coordonnées du tableau.
Le code d'implémentation du cercle de dessin sur toile :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#myCanvas{
margin: 0 auto;
display: block;
}
</style></head><body>
<canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
<script type="text/javascript">
//方法三：获取圆坐标方式 动态画圆
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var mW = c.width = 300;
var mH = c.height = 300;
var lineWidth = 5;
var r = mW / 2; //中间位置
var cR = r - 4 * lineWidth; //圆半径
var startAngle = -(1 / 2 * Math.PI); //开始角度
var endAngle = startAngle + 2 * Math.PI; //结束角度
var xAngle = 2 * (Math.PI / 180); //偏移角度量
var cArr = []; //圆坐标数组
//初始化圆坐标数组
for(var i = startAngle; i <= endAngle; i += xAngle){
//通过sin()和cos()获取每个角度对应的坐标
var x = r + cR * Math.cos(i);
var y = r + cR * Math.sin(i);
cArr.push([x, y]);
} //移动到开始点
var startPoint = cArr.shift();
ctx.beginPath();
ctx.moveTo(startPoint[0], startPoint[1]); //渲染函数
var rander = function(){
//画圈
if(cArr.length){
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#1c86d1';
var tmpPoint = cArr.shift();
ctx.lineTo(tmpPoint[0], tmpPoint[1]);
ctx.stroke();
}else{
cArr = null;
return;
}
requestAnimationFrame(rander);
};
rander();
</script>
</body>
</html>Copier après la connexion
Le rendu du cercle de dessin sur toile :
Les articles ci-dessus sont trois méthodes de mise en œuvre pour utiliser le canevas pour dessiner un cercle. Ces trois méthodes sont toutes implémentées dynamiquement et l'effet final est le même. Si vous souhaitez en savoir plus sur Canvas, vous pouvez vous référer au Manuel de développement HTML5.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
