扇形制作原理, 底部一个纯色原形, 里面 2 个相同颜色的半圆, 可以是白色, 内部半圆按一定角度变化, 就可以产生出扇形效果 </pre>
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 扇形绘制 </title>
- <style> .shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow;
- } .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;
- /*-webkit-animation: an1 2s infinite linear; */
- } .sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00;
- /*-webkit-animation: an2 2s infinite linear;*/
- }
- /* 绘制一个 60 度扇形 */ .shanxing1 .sx1{transform: rotate(-30deg);} .shanxing1 .sx2{transform: rotate(-150deg);}
- /* 绘制一个 85 度扇形 */ .shanxing2 .sx1{transform: rotate(-45deg);} .shanxing2 .sx2{transform: rotate(-140deg);}
- /* 绘制一个向右扇形, 90 度扇形 */ .shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(-45deg);}
- /* 绘制一个颜色扇形 */ .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
- /* 绘制一个不同颜色半圆夹角 */ .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
- </style>
- </head>
- <body> 扇形制作原理, 底部一个纯色原形, 里面 2 个相同颜色的半圆, 可以是白色, 内部半圆按一定角度变化, 就可以产生出扇形效果 <p>/ 绘制一个 60 度扇形 /</p>
- <div class="shanxing shanxing1">
- <div class="sx1"></div>
- <div class="sx2"></div>
- </div>
- <p>/* 绘制一个 85 度扇形 */</p>
- <div class="shanxing shanxing2">
- <div class="sx1"></div>
- <div class="sx2"></div>
- </div>
- <p>/* 绘制一个向右扇形, 90 度扇形 */</p>
- <div class="shanxing shanxing3">
- <div class="sx1"></div>
- <div class="sx2"></div>
- </div>
- <p>/* 绘制一个颜色扇形 */</p>
- <div class="shanxing shanxing4">
- <div class="sx1"></div>
- <div class="sx2"></div>
- </div>
- <p>/* 绘制一个不同颜色半圆夹角 */</p>
- <div class="shanxing shanxing5">
- <div class="sx1"></div>
- <div class="sx2"></div>
- </div>
- </body>
- </HTML></pre>
下面这个是结合 CSS+html5+JavaScript 的一个更复杂的圆环图形
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <%
- String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <HTML>
- <head>
- <base href="<%=basePath%>">
- <title>
- circle
- </title>
- <style type="text/css">
- #myCanvas{} #nihao{ position: absolute; top:10px; z-index: 1; }
- </style>
- </head>
- <body style="background:#FBFBFB;">
- <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
- not suopport canvas
- </canvas>
- <div id="nihao">
- </div>
- <script>
- var text = document.getElementById("nihao");
- text.innerHTML = "woshiwuxinguo";
- var i = 0.9; // 这里默认设置好评率为 90%
- var c = document.getElementById("myCanvas");
- var ctx = c.getContext("2d");
- ctx.beginPath();
- ctx.lineWidth = 10;
- ctx.strokeStyle = "gray";
- ctx.arc(100, 75, 50, 0, 2 * Math.PI);
- ctx.fillStyle = "#FBFBFB";
- ctx.fill();
- ctx.stroke();
- ctx.beginPath();
- ctx.translate(100, 75);
- ctx.rotate( - 90 * Math.PI / 180);
- ctx.strokeStyle = "#FFCFCF";
- ctx.arc(0, 0, 50, 0, 2 * Math.PI * i);
- ctx.stroke();
- c.addEventListener("mouseover",
- function(e) {
- ctx.beginPath();
- ctx.strokeStyle = "gray";
- ctx.arc(0, 0, 50, 0, 2 * Math.PI);
- ctx.stroke();
- var finish = i;
- var step = 0;
- var internal = setInterval(function(e) {
- console.log("step:" + step);
- if (step < finish) {
- step = step + 0.01;
- ctx.beginPath();
- ctx.strokeStyle = "#FFCFCF";
- ctx.arc(0, 0, 50, 0, 2 * Math.PI * step);
- ctx.stroke();
- } else {
- clearInterval(internal);
- }
- },
- 0.5)
- },
- true)
- </script>
- </body>
- </HTML>
- </pre>
来源: http://www.qdfuns.com/article/51116/5c20bd99f872ae9f20569869b6e6191c.html