小程序模板網(wǎng)

秀杰實(shí)戰(zhàn)教程系列《二》:微信小程序繪圖課程之餅圖

發(fā)布時(shí)間:2018-03-20 12:21 所屬欄目:小程序開發(fā)教程

官方文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-canvas.html思路是先畫第一段弧,然后連線回圓心,關(guān)閉路徑,注意不需要連線到起始位,用fill()自動(dòng)閉合到起始點(diǎn),對照Photoshop里路徑轉(zhuǎn)選區(qū)的做法可 ...

 
 
 

官方文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-canvas.html

思路是先畫第一段弧,然后連線回圓心,關(guān)閉路徑,注意不需要連線到起始位,用fill()自動(dòng)閉合到起始點(diǎn),對照Photoshop里路徑轉(zhuǎn)選區(qū)的做法可以有助于理解;第二段弧以前一段弧為起始角度,再回圓心,最后關(guān)閉路徑;第三段弧以前兩段弧之和為起始角度,掃過相應(yīng)比重的弧度;以此類推,完成整圓。

布局文件
Javascript文件

  1. Page({
  2. onReady:function(){
  3. // 頁面渲染完成
  4. // 創(chuàng)建上下文
  5. var context = wx.createContext();
  6. // 畫餅圖
  7. // 數(shù)據(jù)源
  8. var array = [20, 30, 40, 40];
  9. var colors = ["#ff0000", "#ffff00", "#0000ff", "#00ff00"];
  10. var total = 0;
  11. // 計(jì)算問題
  12. for (index = 0; index < array.length; index++) {
  13. total += array[index];
  14. }
  15. // 定義圓心坐標(biāo)
  16. var point = {x: 100, y: 100};
  17. // 定義半徑大小
  18. var radius = 60;
  19.  
  20. /* 循環(huán)遍歷所有的pie */
  21. for (i = 0; i < array.length; i++) {
  22. context.beginPath();
  23. // 起點(diǎn)弧度
  24. var start = 0;
  25. if (i > 0) {
  26. // 計(jì)算開始弧度是前幾項(xiàng)的總和,即從之前的基礎(chǔ)的上繼續(xù)作畫
  27. for (j = 0; j < i; j++) {
  28. start += array[j] / total * 2 * Math.PI;
  29. }
  30. }
  31. console.log("i:" + i);
  32. console.log("start:" + start);
  33. // 1.先做第一個(gè)pie
  34. // 2.畫一條弧,并填充成三角餅pie,前2個(gè)參數(shù)確定圓心,第3參數(shù)為半徑,第4參數(shù)起始旋轉(zhuǎn)弧度數(shù),第5參數(shù)本次掃過的弧度數(shù),第6個(gè)參數(shù)為時(shí)針方向-false為順時(shí)針
  35. context.arc(point.x, point.y, radius, start, array[i] / total * 2 * Math.PI, false);
  36. // 3.連線回圓心
  37. context.lineTo(point.x, point.y);
  38. // 4.填充樣式
  39. context.setFillStyle(colors[i]);
  40. // 5.填充動(dòng)作
  41. context.fill();
  42. context.closePath();
  43. }
  44.  
  45. wx.drawCanvas({
  46. canvasId: 'canvas2',
  47. actions: context.getActions()
  48. });
  49. }
  50. })


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/22766.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢