原码笔记

原码笔记

利用CSS绘制任意角度的扇形示例代码

小诸哥 0

前言

扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果

效果图

示例代码:

  1. <html>
  2. <head>
  3.      <meta charset="UTF-8">
  4.      <title>扇形绘制</title>
  5.      <style> .shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow;
  6.          } .sx1{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */ border-radius: 100px; background-color: #f00;
  7.              /*-webkit-animation: an1 2s infinite linear; */
  8.          } .sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00;
  9.              /*-webkit-animation: an2 2s infinite linear;*/
  10.          }
  11.          /*绘制一个60度扇形*/ .shanxing1 .sx1{transform: rotate(-30deg);} .shanxing1 .sx2{transform: rotate(-150deg);}
  12.  
  13.          /*绘制一个85度扇形*/ .shanxing2 .sx1{transform: rotate(-45deg);} .shanxing2 .sx2{transform: rotate(-140deg);}
  14.  
  15.          /*绘制一个向右扇形,90度扇形*/ .shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(-45deg);}
  16.  
  17.          /*绘制一个颜色扇形 */ .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
  18.  
  19.          /*绘制一个不同颜色半圆夹角 */ .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
  20. </style>
  21. </head>
  22. <body> 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 <p>/绘制一个60度扇形/</p>
  23.  
  24. <div class="shanxing shanxing1">
  25.      <div class="sx1";></div>
  26.          <div class="sx2"></div>
  27. </div>
  28. <p>/*绘制一个85度扇形*/</p>
  29. <div class="shanxing shanxing2">
  30.      <div class="sx1"></div>
  31.          <div class="sx2"></div>
  32. </div>
  33. <p>/*绘制一个向右扇形,90度扇形*/</p>
  34. <div class="shanxing shanxing3">
  35.      <div class="sx1"></div>
  36.          <div class="sx2"></div>
  37. </div>
  38. <p>/*绘制一个颜色扇形 */</p>
  39. <div class="shanxing shanxing4">
  40.      <div class="sx1"></div>
  41.          <div class="sx2"></div>
  42. </div>
  43.  
  44. <p>/*绘制一个不同颜色半圆夹角 */</p>
  45. <div class="shanxing shanxing5">
  46.      <div class="sx1"></div>
  47.          <div class="sx2"></div>
  48. </div>
  49.  
  50. </body>
  51. </html>

下面这个是结合CSS+html5+javascript的一个更复杂的圆环图形

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
  4.  
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  6. <html>
  7.      <head>
  8.      <base href="<%=basePath%>">
  9.  
  10.      <title>circle</title>
  11.  
  12.      <style type="text/css"> #myCanvas{} #nihao{ position: absolute; top:10px; z-index: 1;
  13.      }
  14.      </style>
  15.      </head>
  16. <body style="background:#FBFBFB;">
  17.  
  18. <canvas id="myCanvas" width="300" height="150" style=&quot;border:1px solid #d3d3d3;"> not suopport canvas </canvas>
  19. <div id="nihao"></div>
  20. <script>
  21. var text=document.getElementById("nihao");
  22. text.innerHTML="woshiwuxinguo"; var i=0.9;//这里默认设置好评率为90%
  23.  
  24. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
  25. ctx.beginPath();
  26. ctx.lineWidth=10;
  27. ctx.strokeStyle="gray";
  28. ctx.arc(100,75,50,0,2*Math.PI);
  29. ctx.fillStyle="#FBFBFB";
  30. ctx.fill();
  31. ctx.stroke();
  32. ctx.beginPath();
  33. ctx.translate(100,75);
  34. ctx.rotate(-90*Math.PI/180);
  35. ctx.strokeStyle="#FFCFCF";
  36. ctx.arc(0,0,50,0,2*Math.PI*i);
  37. ctx.stroke();
  38. c.addEventListener("mouseover", function(e) {
  39. ctx.beginPath();
  40. ctx.strokeStyle="gray";
  41. ctx.arc(0,0,50,0,2*Math.PI);
  42. ctx.stroke(); var finish=i; var step=0; var internal=setInterval(function(e) {
  43. console.log("step:"+step); if(step<finish){
  44.      step=step+0.01;
  45.      ctx.beginPath();
  46.      ctx.strokeStyle="#FFCFCF";
  47.      ctx.arc(0,0,50,0,2*Math.PI*step);
  48.      ctx.stroke();
  49.      }else{
  50.      clearInterval(internal);
  51.      }
  52. }, 0.5)
  53. }, true) </script>
  54.  
  55. </body>
  56. </html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

标签: CSS 代码 绘制任意角度