canvas画布实例(绘制圆形图表)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36981814/article/details/84648379

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d"); 

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); 

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

canvas画布实例(绘制圆形图表)

• 效果图：

• 代码：

<canvas id="myCanvas1" width="200" height="200"></canvas><br/>
<canvas id="myCanvas2" width="200" height="200"></canvas><br/>
<canvas id="myCanvas3" width="200" height="200"></canvas><br/>



<script type="text/javascript">

//canvasid画布名称,x,y 坐标,radius 半径,maxValue最大值,process 百分比,backColor 中心颜色, proColor 进度颜色, fontColor 中心文字颜色,fonttitle中心文字内容，unit中心文字单位
function DrowProcess(canvas,x,y,radius,maxValue,process,backColor,proColor,fontColor,fonttitle,unit){
	if (canvas.getContext) {
		var cts = canvas.getContext('2d');
	}else{
		return;
	}
	cts.beginPath();  
	// 坐标移动到圆心  
	cts.moveTo(x, y);  
	// 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针  
	cts.arc(x, y, radius, 0, Math.PI * 2, false);  
	cts.closePath();  
	// 填充颜色  
	cts.fillStyle = backColor;  
	cts.fill();

	cts.beginPath();  
	// 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形  
	cts.moveTo(x, y);  
	// 跟上面的圆唯一的区别在这里,不画满圆,画个扇形  
	cts.arc(x, y, radius, Math.PI * 1.5, Math.PI * 1.5 -  Math.PI * 2 * process / maxValue, true);  
	cts.closePath();  
	cts.fillStyle = proColor;  
	cts.fill(); 
	
	//填充背景白色
	cts.beginPath();  
	cts.moveTo(x, y); 
	cts.arc(x, y, radius - (radius * 0.26), 0, Math.PI * 2, true);  
	cts.closePath();
	cts.fillStyle = 'rgba(255,255,255,1)';  
	cts.fill(); 

	// 画一条线  
	cts.beginPath();  
	cts.arc(x, y, radius-(radius*0.30), 0, Math.PI * 2, true);  
	cts.closePath();  
	// 与画实心圆的区别,fill是填充,stroke是画线  
	cts.strokeStyle = backColor;  
	cts.stroke();  
	  
	//在中间写字 
	cts.font = "bold 9pt Arial";  
	cts.fillStyle = fontColor;  
	cts.textAlign = 'center';  
	cts.textBaseline = 'middle';  
	cts.moveTo(x, y);  
	cts.fillText(fonttitle+process+unit, x, y);  
	
}

function Create(){
	var canvas1 = document.getElementById('myCanvas1');
	var canvas2 = document.getElementById('myCanvas2');
	var canvas3 = document.getElementById('myCanvas3');

	DrowProcess(canvas1,100,100,55,30,25,'#ddd','#32CD32','#32CD32','名称1:','单位1');
	DrowProcess(canvas2,100,100,55,50,40,'#ddd','#32CD32','#32CD32','名称2:','单位2');
	DrowProcess(canvas3,100,100,55,100,40,'#ddd','#32CD32','#32CD32','名称3:','单位3');

}

Create();

</script>