欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

百度T7 课程 canvas 画圆环

程序员文章站 2022-05-21 13:48:47
...
window.onload = function(){
					var c1 = document.getElementById('c1')
					var ctx = c1.getContext('2d')
					var canvasWidth = ctx.canvas.width;
					var canvasHeigh = ctx.canvas.height;
					var cx = canvasWidth/2;
					var cy = canvasHeigh/2;
					ctx.moveTo(cx,cy)
					ctx.arc(cx,cy,100,45*Math.PI * 180,true)
					ctx.stroke()
					

				}

show :

百度T7 课程 canvas 画圆环

 

 

// y = 2x;
			window.onload = function(){
					var c1 = document.getElementById('c1')
					var ctx = c1.getContext('2d')
					var canvasWidth = ctx.canvas.width;
					var canvasHeigh = ctx.canvas.height;
					var cx = canvasWidth/2;
					var cy = canvasHeigh/2;
					ctx.moveTo(cx,cy)
					ctx.arc(cx,cy,100,45*Math.PI * 180,true)
					// ctx.stroke()
					ctx.fill()

				}

百度T7 课程 canvas 画圆环

 

 

window.onload = function(){
					var c1 = document.getElementById('c1')
					var ctx = c1.getContext('2d')
					var canvasWidth = ctx.canvas.width;
					var canvasHeigh = ctx.canvas.height;
					var cx = canvasWidth/2;
					var cy = canvasHeigh/2;
					// ctx.moveTo(cx,cy)
					ctx.arc(cx,cy,100,45*Math.PI * 180,true)
					// ctx.stroke()
					ctx.fill()

				}

show :

百度T7 课程 canvas 画圆环

 

 

 

window.onload = function(){
					var c1 = document.getElementById('c1')
					var ctx = c1.getContext('2d')
					var canvasWidth = ctx.canvas.width;
					var canvasHeigh = ctx.canvas.height;
					var cx = canvasWidth/2;
					var cy = canvasHeigh/2;
					// ctx.moveTo(cx,cy)
					ctx.arc(cx,cy,100,45*Math.PI * 180,true)
					 ctx.stroke()
					// ctx.fill()

				}

show :

百度T7 课程 canvas 画圆环

 

从上面就可以看出,是否设置 moveTo 和 描边,好填充的区别了!