HTML5 mobile 旋轉餅圖
繼Android、IOS之後我有不知屎活的接手了‘mobile web’的東西，折騰得仙仙欲屎，還好這次旁邊有個WEB開發的同事可以給我請教，總算是能開發點東西了。
需求是要在手機上弄一個可以旋轉的圓環圖，滑動到指針所在位置，就給出對應圓環的信息，例如百分比，費用。
實現方法如下：
1、畫出餅圖Canvas（http://www.w3school.com.cn/html5/html_5_canvas.asp）
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//畫紅
cxt.fillStyle="#F00";
cxt.beginPath();
cxt.moveTo(50,50);
cxt.arc(50,50,50,0,Math.PI,true);
cxt.closePath();
cxt.fill();
//畫黑
cxt.fillStyle="#000";
cxt.beginPath();
cxt.moveTo(50,50);
cxt.arc(50,50,50,Math.PI,Math.PI*2,true);
cxt.closePath();
cxt.fill();
//畫小圓
cxt.fillStyle="#FFF";
cxt.beginPath();
cxt.moveTo(50,50);
cxt.arc(50,50,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
Your browser does not support the canvas element.
2、旋轉
我用的是百度的Touch.js
http://touch.code.baidu.com/
結果就是這樣：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script src="http://touch.code.baidu.com/touch-0.2.14.min.js"></script>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//畫紅
cxt.fillStyle="#F00";
cxt.beginPath();
cxt.moveTo(50,50);
cxt.arc(50,50,50,0,Math.PI,true);
cxt.closePath();
cxt.fill();
//畫黑
cxt.fillStyle="#000";
cxt.beginPath();
cxt.moveTo(50,50);
cxt.arc(50,50,50,Math.PI,Math.PI*2,true);
cxt.closePath();
cxt.fill();
//畫小圓
cxt.fillStyle="#FFF";
cxt.beginPath();
cxt.moveTo(50,50);
cxt.arc(50,50,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
var angle = 0;
touch.on('#myCanvas', 'touchstart', function(ev){
ev.startRotate();
ev.preventDefault();
});
touch.on('#myCanvas', 'rotate', function(ev){
var totalAngle = angle + ev.rotation;
if(ev.fingerStatus === 'end'){
angle = angle + ev.rotation;
}
this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)';
});
</script>
</body>
</html>
完。