html根据坐标画圆,Canvas三种动态画圆实现方法说明(小结)

前言

canvas是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。

这里我个人总结了3种实现方法，大家可以参考一下。

方法一：arc()实现画圆

代码：

#myCanvas{

margin: 0 auto;

display: block;

}

当前浏览器不支持canvas组件请升级！

//方法一：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)