釘釘小程式 canvas實現環形進度條

2021-10-07 17:16:10 字數 1959 閱讀 7115

1、在頁面上新增 canvas 元素

"canvasid"

width

="}"

height

="}"

style

="width

:200px;

height

:200px;

background

:pink

"/>

2、完成繪製圓環**演示

page(,

onload()

)}})

},onready()

//計算圓環上點的座標函式

function

calcringpoint

(x, y, radius, angle)

res.x = x + radius * math.

cos(angle * math.pi/

180)

res.y = y + radius * math.

sin(angle * math.pi/

180)

console.

log(res)

return res

}});},}

);

步驟1 ~ 步驟6 的效果圖

3、根據百分比,動態渲染圓環

**演示

page(,

onload()

)}})

},onready()

else

renderring

(startangle, tempangle)},

10)// 圓環渲染函式

function

renderring

(startangle, endangle)

//角度轉弧度函式

function

angle2radian

(angle)

//計算圓環上點的座標函式

function

calcringpoint

(x, y, radius, angle)

res.x = x + radius * math.

cos(angle * math.pi/

180)

res.y = y + radius * math.

sin(angle * math.pi/

180)

console.

log(res)

return res

}});},}

);

效果圖

釘釘小程式的下拉重新整理

釘釘開發文件上寫了,看的話應該不難理解。寫這篇部落格也是想說,可以警示自己更加細緻,更加仔細。我在最開始找的時候,並沒有在釘釘的官方文件上找到相關的方法,然後就上網去搜了,但是網上關於釘釘的技術部落格很少。然後又問了問別人,最後還是人家給我發了乙個釘釘官方文件的鏈結。還有就是順帶說一句,釘釘開發的那...

釘釘小程式封裝網路請求

1 2globaldata 6 由於介面的傳參方式不同 可能是formdata形式,也可能是query形式 因此將此條件也封裝了進去7 封裝網路請求 需要手動呼叫json.stringify將資料進行序列化 19data data,20 datatype json 21 success functi...

釘釘小程式開發注意事項

1.setdata改變對應的this.data的值 注意 不要直接修改this.data對應的資料。在dd.httprequest 中無法獲取this物件,需要在請求外面定義變數去過渡釘釘變數 this.setdata 2.dataset在元件中可以定義資料,這些資料將會通過事件傳遞給邏輯層。dat...