百度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()
					

				}

show :

 

 

// 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()

				}

 

 

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 :

 

 

 

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 :

 

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