用canvas绘制一个饼状图...

最新推荐文章于 2022-12-08 19:43:05 发布

DanieL_wWw

最新推荐文章于 2022-12-08 19:43:05 发布

阅读量684

点赞数

分类专栏： HTML5 文章标签： HTML5 Canvas

本文链接：https://blog.csdn.net/weixin_41871881/article/details/82801444

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Canvas，网页原来是可以画出来的...

认识Canvas
Canvas绘制矩形
Canvas绘制圆形
使用moveTo()和lineTo()绘制路径
Canvas绘制一个饼状图

认识Canvas

canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可以在其中进行图形的绘制。但绘制图形，并不是指使用鼠标作画，而是需要javascript进行配合。创建canvas的时候，他默认的宽高为300px*150px。

<canvas id="canvas">我是一个画布</canvas>

Canvas绘制矩形

我们在HTML页面中直接插入canvas标签，也可以对它设置宽度和高度，切记设置canvas的时候不可以利用css样式进行设置。那么，我们想在canvas上面画出矩形，我们就需要认识以下几种api。

方法	描述
getContext()	获取绘图环境，可选参数"2d"
fillRect(x,y,width,height)	绘制一个填充的矩形
strokeRect(x,y,width,height)	绘制一个矩形的边框
clearRect(x,y,width,height)	清除指定矩形区域。

<script>
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境
    ctx.fillRect(50,50,100,100)//绘制填充的"黑色"的矩形
    ctx.strokeRect(50,50,100,100)//绘制一个"黑色"矩形的边框
    ctx.clearRect(50,50,10,10)//清除"x=50,y=50,宽度为10,高度为10的区域"
</script>

但有些时候，我们希望能够修改矩形的样式，又不可以直接通过修改css方式来修改。那么在canvas中也提供了api为我们来修改样式。

方法	描述
fillStyle	填充背景颜色
strokeStyle	设置边框颜色
lineWidth	设置边框的宽度

<script>
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境
    ctx.fillStyle = "red"//绘制填充的"红色"的矩形
    ctx.strokeStyle = "red"//绘制边框的"红色"的矩形
    ctx.lineWidth = "10"//设置边框宽度
</script>

Canvas绘制圆形

绘制圆形,canvas也为我们提供了arc这个方法：

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

该方法有6个参数，x为绘制圆形的起点横坐标，y表示绘制圆形的起点的纵坐标,radius表示圆的半径，startAngle为开始角度，endAngle为结束的角度, anticlockwise是否按照顺时针方向进行绘制。false表示顺时针。（默认为顺时针）。

<script>
	var canvas = document.getElementById("canvas")
	var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境
	ctx.beginPath()
	ctx.arc(100,100,50,0,90*Math.PI/180,false)
	ctx.stroke()
	ctx.closePath()
</script>

其中有个弧度转换的公式：degreens*Math.PI/180，绘制圆形默认按照以下的位置进行切换。

使用moveTo()和lineTo()绘制路径

我们可以使用moveTo()和lineTo()绘制直线，或者是自己想要的图形，不局限于矩形。

方法	描述
moveTo(x,y)	不绘制，只是将当前位置移动到新的目标点
lineTo(x,y)	不仅将当前位置移动到新的目标点(x,y)，而且在两个坐标之间画一条直线。
linejoin	设置两线段连接处所显示的样子。round,bevel,miter
lineCap	线段端点显示的样式
save	保存绘画路径
restore	销毁路径

注意:我们使用两个方法的时候，要注意使用closePath()闭合。因为它会通知canvas当前绘制的图形已经闭合或者形成了完全封闭。(linejoin)

用Canvas绘制一个饼状图

那么重点来了，如何用Canvas绘制一个饼状图呢？下面是我的代码，带注释。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: black;
			}
			canvas{
				background: #fff;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400"></canvas>//创建画布
		<script>
			var ctx = document.getElementById("canvas")
			var oC = ctx.getContext("2d")//获取绘制图片环境
			
			oC.beginPath()//开始绘制路径
			oC.moveTo(100,100)//不绘制，只是将当前位置移动到新的目标点
			oC.arc(100,100,60,-90*Math.PI/180,45*Math.PI/180);//红色圆弧的角度
			//该方法有6个参数，x为绘制圆形的起点横坐标，y表示绘制圆形的起点的纵坐标,
			//radius表示圆的半径，startAngle为开始角度，endAngle为结束的角度, 
			//anticlockwise是否按照顺时针方向进行绘制。false表示顺时针。（默认为顺时针）。
			oC.closePath()//关闭路径
			oC.stroke()//实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
			oC.fillStyle = "red"//填充背景颜色
			oC.fill()//填充颜色
			
			oC.beginPath()
			oC.moveTo(100,100)
			oC.arc(100,100,60,45*Math.PI/180,160*Math.PI/180);//绿色圆弧的角度
			oC.closePath()
			oC.stroke()
			oC.fillStyle = "green"
			oC.fill()
			
			oC.beginPath()
			oC.moveTo(100,100)
			oC.arc(100,100,60,160*Math.PI/180,-90*Math.PI/180);//蓝色圆弧的角度
			oC.closePath()
			oC.stroke()
			oC.fillStyle = "blue"
			oC.fill()
		</script>
<!--<script>
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境
    ctx.fillRect(50,50,100,100)//绘制填充的"黑色"的矩形
    ctx.strokeRect(50,50,100,100)//绘制一个"黑色"矩形的边框
    ctx.clearRect(50,50,10,10)//清除"x=50,y=50,宽度为10,高度为10的区域"
</script>
<script>
	 ctx.fillStyle = "red"//绘制填充的"红色"的矩形
    ctx.strokeStyle = "red"//绘制边框的"红色"的矩形
	ctx.lineWidth = "10"//设置边框宽度
</script>
<script>
	var canvas = document.getElementById("canvas")
	var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境
	ctx.beginPath()
	ctx.arc(100,100,50,0,90*Math.PI/180,false)
	ctx.stroke()
	ctx.closePath()
</script>-->
	</body>
</html>

下面是效果图：