百度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 和 描边,好填充的区别了!

猜你喜欢

转载自blog.csdn.net/qq_15009739/article/details/82715456