查看: 1852|回复: 0

[DIV/CSS] canvas基础绘制-arc

发表于 2017-9-24 08:00:05
句号论坛
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>arc</title>
  6. </head>
  7. <body>
  8. <canvas id="canvas" style="border: 1px solid #ddd;"></canvas>
  9. <script>
  10. //draw an arc画曲线
  11. var canvas = document.getElementById("canvas");
  12. canvas.width = 1024;
  13. canvas.height = 768;
  14. var context = canvas.getContext("2d");
  15. context.lineWidth = 5;
  16. context.strokeStyle = "#058";
  17. context.arc(300,300,200,0,0.5*Math.PI,true);
  18. //context.arc(
  19. //conterx,contery,radius,//圆心坐标x,圆心坐标y,半径
  20. //startingAngle,endingAngle,//起始弧度值,终止弧度值
  21. //anticlockwise = false//false顺时针绘制,true逆时针绘制
  22. // );
  23. context.stroke();
  24. </script>
  25. </body>
  26. </html>
复制代码

绘制单个圆:

绘制多个圆:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>arc*n</title>
  6. </head>
  7. <body>
  8. <canvas id="canvas" style="border: 1px solid #ddd"></canvas>
  9. <script>
  10. var canvas = document.getElementById("canvas");
  11. canvas.width = 1024;
  12. canvas.height = 768;
  13. var context = canvas.getContext("2d");
  14. context.lineWidth = 5;
  15. context.strokeStyle = "#058";
  16. for(var i=0;i<10;i++){
  17. context.beginPath();//重新开始新的路径
  18. context.arc(50+100*i,60,40,0,2*Math.PI*(i+1)/10);
  19. context.closePath();//结束当前路径,自动绘制封闭未封闭的线段
  20. context.stroke();
  21. }
  22. for(var i=0;i<10;i++){
  23. context.beginPath();//重新开始新的路径
  24. context.arc(50+100*i,180,40,0,2*Math.PI*(i+1)/10);
  25. context.stroke();
  26. }
  27. for(var i=0;i<10;i++){
  28. context.beginPath();//重新开始新的路径
  29. context.arc(50+100*i,300,40,0,2*Math.PI*(i+1)/10,true);
  30. context.closePath();//结束当前路径,自动绘制封闭未封闭的线段
  31. context.stroke();
  32. }
  33. for(var i=0;i<10;i++){
  34. context.beginPath();//重新开始新的路径
  35. context.arc(50+100*i,420,40,0,2*Math.PI*(i+1)/10,true);
  36. context.stroke();
  37. }
  38. //填充图形;
  39. context.fillStyle = "#058";
  40. for(var i=0;i<10;i++){
  41. context.beginPath();//重新开始新的路径
  42. context.arc(50+100*i,540,40,0,2*Math.PI*(i+1)/10);
  43. context.fill();
  44. }
  45. </script>
  46. </body>
  47. </html>
复制代码



太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条