고리형 진도표의 실현 방법 요약과 동적 시계 그리기(CSS3, SVG,Canvas)

CSS ：

1. /* */
.circle { position: relative; width: 130px; height: 130px; text-align: center; } .circle .track, .circle .mask, .circle .left, .circle .right { width: 130px; height: 130px; position: absolute; top: 0; left: 0; border-radius: 50%; border: 20px #e7e7e7 solid; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .circle .mask, .circle .left, .circle .right { clip: rect(0 65px 130px 0); } .circle .left, .circle .right { border-color: #6FEC6F; } .circle .right { opacity: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* */ .circle #hour { color: #666; font-size: 48px; line-height: 130px; } .circle .percent { font-size: 20px; color: #999; margin-left: 5px; } .transition-rotate { -webkit-transition: transform .1s ease-in-out; -moz-transition: transform .1s ease-in-out; -ms-transition: transform .1s ease-in-out; -o-transition: transform .1s ease-in-out; transition: transform .1s ease-in-out; }
JavaScript 코드:
  var circle = document.querySelectorAll(".circle")[0]; var mask = document.querySelectorAll(".mask")[0]; var left = document.querySelectorAll(".left")[0]; var right = document.querySelectorAll(".right")[0]; var range = document.getElementById("range");
2. var hour = document.querySelectorAll("#hour")[0];
3. var n;
changeHour(); range.oninput = changeHour; function changeHour() { hour.innerHTML = range.value; n = range.value; if(n <= 50) { left.style.webkitTransform="rotate(" + 3.6 * n + "deg)"; right.style.opacity = 0; mask.style.opacity = 1; }else { right.style.opacity = 1; mask.style.opacity = 0; left.style.webkitTransform="rotate(" + 180 + "deg)"; right.style.webkitTransform="rotate(" + 3.6 * n + "deg)"; } }

：

~

 

. SVG

SVG stroke-dasharray stroke-dashoffset ， 。

：

stroke-dasharray ， stroke-dashoffset ， 。

： 
HTML ：

 
1. <svg id="circleProcess" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" cx="50%" cy="50%" r="40%" stroke-width="10%"></circle> </svg> <input id="range" type="range" min="0" max="255" step="1" value="0">
CSS 코드:
  #circleProcess { position: relative; top: 0; left: 0; width: 200px; height: 200px; stroke-dasharray: 255%; stroke-dashoffset: 255%; stroke: #6FEC6F; fill: none; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }
JavaScript 코드:
  var circleProcess = document.getElementById("circleProcess"); var circle = document.getElementById("circle"); var range = document.getElementById("range"); // var rangeValue;
2. range.oninput = function() {
rangeValue = Number(range.value); circle.setAttribute("stroke-dashoffset", (255 - rangeValue) + "%"); }

：

~

 

. HTML5 Canvas

HTML5 Canvas 。 Canvas ， arc(x1, y1, r, beginAngle, endAngle, boolean) 。

HTML ：

 
1. <canvas id="circle" width="130" height="130"></canvas>
<input id="range" type="range" min="0" max="360" step="1" value="0">
JavaScript 코드:
  var range = document.getElementById("range"); var rangeValue; //
2. var circle = document.getElementById("circle");
var circleWidth = circle.width; var circleHeight = circle.height; var circleContext = circle.getContext("2d");
3. var circleValue = {
x: 65, y: 65, r: 45, beginAngle: - Math.PI / 2, endAngle: 0 };
4. //
circleContext.lineWidth = 20; circleContext.strokeStyle = "#6FEC6F";
5. //
function drawCircle() { circleContext.restore(); // circleContext.clearRect(0,0, circleWidth, circleHeight); // range Math.PI rangeValue = Number(range.value); // circleValue.endAngle = circleValue.beginAngle + (rangeValue / 360) * 2 * Math.PI; circleContext.beginPath(); // circleContext.arc(circleValue.x, circleValue.y, circleValue.r, circleValue.beginAngle, circleValue.endAngle, false); circleContext.stroke(); circleContext.save(); } // range.oninput = drawCircle; drawCircle();

：

~

 

. sprite

sprite ， background position 。 ， ， ， ， ， 。

， ~（ ~( ╯□╰ )~）

 

（CSS3、SVG、Canvas）

。

， ， 。 ：

“ CSS3 ， 。 IE6~8 。” 1 。

CSS3、SVG、Canvas 。

 

1. CSS3

~

 

2. SVG

~

 

3. HTML5 canvas

~

 

1 .  (CSS3、SVG、canvas)+JS ~

2 .  (CSS3、SVG、canvas)+JS ~