canvas基础绘制-arc - 喵嘻嘻

      2020-08-01 23:10      HTML5

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>arc</title></head><body><canvas></canvas><script>canvas = document.getElementById("canvas");canvas.width = 1024;canvas.height = 768;var context = canvas.getContext("2d");context.lineWidth = 5;context.strokeStyle = "#058";context.arc(300,300,200,0,0.5*Math.PI,true); context.stroke();</script></body></html>

绘制单个圆:

绘制多个圆:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>arc*n</title></head><body><canvas></canvas><script>var canvas = document.getElementById("canvas");canvas.width = 1024;canvas.height = 768;var context = canvas.getContext("2d");context.lineWidth = 5;context.strokeStyle = "#058";for(var i=0;i<10;i++){context.beginPath();//重新开始新的路径context.arc(50+100*i,60,40,0,2*Math.PI*(i+1)/10);context.closePath();//结束当前路径,自动绘制封闭未封闭的线段context.stroke();}for(var i=0;i<10;i++){context.beginPath();//重新开始新的路径context.arc(50+100*i,180,40,0,2*Math.PI*(i+1)/10);context.stroke();}for(var i=0;i<10;i++){context.beginPath();//重新开始新的路径context.arc(50+100*i,300,40,0,2*Math.PI*(i+1)/10,true);context.closePath();//结束当前路径,自动绘制封闭未封闭的线段context.stroke();}for(var i=0;i<10;i++){context.beginPath();//重新开始新的路径context.arc(50+100*i,420,40,0,2*Math.PI*(i+1)/10,true);context.stroke();}//填充图形;context.fillStyle = "#058";for(var i=0;i<10;i++){context.beginPath();//重新开始新的路径context.arc(50+100*i,540,40,0,2*Math.PI*(i+1)/10);context.fill();}</script></body></html>