HTML5 mobile 旋轉餅圖

最新推荐文章于 2020-06-28 11:51:20 发布

雨声不在

最新推荐文章于 2020-06-28 11:51:20 发布

阅读量932

点赞数

分类专栏： H5/Mini-Program 文章标签： html5

转载请邮件联系我(hello@yeshen.org)，以取得授权，谢谢！https://yeshen.org

本文链接：https://blog.csdn.net/yeshennet/article/details/50531007

版权

H5/Mini-Program 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

繼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/

https://github.com/Clouda-team/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>

完。

雨声不在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 mobile 旋轉餅圖

繼Android、IOS之後我有不知屎活的接手了‘mobile web’的東西，折騰得仙仙欲屎，還好這次旁邊有個WEB開發的同事可以給我請教，總算是能開發點東西了。需求是要在手機上弄一個可以旋轉的圓環圖，滑動到指針所在位置，就給出對應圓環的信息，例如百分比，費用。實現方法如下：1、畫出餅圖Canvas（http://www.w3school.com.cn/html5/html_5_ca
复制链接

扫一扫