欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條

 更新時間:2022年06月30日 08:46:51   作者:逃離到火星  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條的具體代碼,供大家參考,具體內(nèi)容如下

index.wxss

.circle {
? position: absolute;
? left: 0;
? right: 0;
? margin: auto;
}

index.wxml

<canvas class="circle" style="z-index: 1;" canvas-id="canvasArcCir"></canvas>
<canvas class="circle" style="z-index: 0;" canvas-id="canvasCircle"></canvas>

index.js

var interval;
var varName;
var ctx = wx.createCanvasContext('canvasArcCir');


Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? pitch: 0,
? ? titleName: "答題結(jié)果",
? ? btn_color: "",
? ? text: 0,
? ? accuracy: {},
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? ? if (options.correctAndError != null) {
? ? ? var accuracyTemp = JSON.parse(options.correctAndError);
? ? ? accuracyTemp.time = (accuracyTemp.time / 2).toFixed(1);
? ? } else {
? ? ? var accuracyTemp = {
? ? ? ? questionNumber: 10,
? ? ? ? correctNumber: 7,
? ? ? ? time: 50
? ? ? }
? ? }

? ? var bgColorTemp = "";
? ? var bColorTemp = "";
? ? if ((accuracyTemp.correctNumber / accuracyTemp.questionNumber) < 0.6) {
? ? ? bgColorTemp = "linear-gradient(180deg,rgba(255,90,84,1) 0%,rgba(255,152,109,1) 100%)";
? ? ? bColorTemp = "#FF5C54"
? ? } else if ((accuracyTemp.correctNumber / accuracyTemp.questionNumber) < 0.8) {
? ? ? bgColorTemp = "linear-gradient(180deg,rgba(250,182,25,1) 0%,rgba(249,206,69,1) 100%)";
? ? ? bColorTemp = "#FBC932";
? ? } else {
? ? ? bgColorTemp = "linear-gradient(180deg,rgba(53,168,203,1) 0%,rgba(80,205,219,1) 100%)";
? ? ? bColorTemp = "#36A9CB";
? ? }

? ? //練習(xí)結(jié)果-差
? ? this.setData({
? ? ? bgColor: bgColorTemp,
? ? ? btBgColor: bgColorTemp,
? ? ? tColor: bColorTemp,
? ? ? bdColor: bColorTemp,
? ? ? accuracy: accuracyTemp
? ? });
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
? ? var that = this;
? ? setTimeout(function () {


? ? ? //創(chuàng)建并返回繪圖上下文context對象。
? ? ? //灰色圓環(huán)
? ? ? var cxt_arc = wx.createCanvasContext('canvasCircle');
? ? ? cxt_arc.setLineWidth(15);
? ? ? cxt_arc.setStrokeStyle('#eaeaea');
? ? ? cxt_arc.setLineCap('round');
? ? ? cxt_arc.beginPath();
? ? ? cxt_arc.arc(130, 130, 94, 2.5, 2.2 * Math.PI, false);
? ? ? cxt_arc.stroke();
? ? ??
? ? ??
? ? ? //沒有運(yùn)動的白點
? ? ? cxt_arc.beginPath();
? ? ? cxt_arc.setStrokeStyle('#fff');
? ? ? cxt_arc.setLineCap('round');
? ? ? cxt_arc.setLineWidth(5);
? ? ? cxt_arc.arc(55, 185, 1, 0, 2 * Math.PI, false);
? ? ? cxt_arc.stroke();
? ? ??
? ? ??
? ? ? //虛線中的圓環(huán)
? ? ? var waste_pce = 20;
? ? ? cxt_arc.setLineWidth(18);
? ? ? cxt_arc.setStrokeStyle(that.data.tColor);
? ? ? cxt_arc.setLineCap('square')
? ? ? cxt_arc.beginPath(); //開始一個新的路徑
? ? ? cxt_arc.arc(130, 130, 60, 2.5, 2.2 * Math.PI, false); //設(shè)置一個原點(106,106),半徑為100的圓的路徑到當(dāng)前路徑
? ? ? cxt_arc.stroke(); //對當(dāng)前路徑進(jìn)行描邊
? ? ??
? ? ??
? ? ? //畫50條放射白線實現(xiàn)虛線效果
? ? ? cxt_arc.setLineWidth(3);
? ? ? cxt_arc.setStrokeStyle('#fff');
? ? ? cxt_arc.setLineCap('square');
? ? ? cxt_arc.beginPath(); //開始一個新的路徑
? ? ? for (var i = 0; i < 50; i++) {
? ? ? ? var x = Math.PI * 2 / 50 * i;
? ? ? ? cxt_arc.moveTo(130, 130);
? ? ? ? cxt_arc.lineTo((130 + Math.sin(x) * 70), (130 + Math.cos(x) * 70));
? ? ? ? cxt_arc.stroke();
? ? ? }

? ? ? var accuracyTemp = (that.data.accuracy.correctNumber / that.data.accuracy.questionNumber)

? ? ? that.drawCircle(accuracyTemp, that.data.tColor);
? ? ??
? ? ? //設(shè)置中間字的坐標(biāo)
? ? ? var x = 130,
? ? ? ? y = 130;
? ? ? if (accuracyTemp == 1) {
? ? ? ? x = 125;
? ? ? ? y = 158;
? ? ? } else if (accuracyTemp == 0) {
? ? ? ? x = 126;
? ? ? ? y = 140;
? ? ? } else {
? ? ? ? x = 126;
? ? ? ? y = 150;
? ? ? }
? ? ??
? ? ? //中間字 數(shù)字
? ? ? cxt_arc.beginPath();
? ? ? cxt_arc.setFontSize(30);
? ? ? cxt_arc.setFillStyle(that.data.tColor);
? ? ? cxt_arc.textAlign = 'center';
? ? ? cxt_arc.fillText(accuracyTemp * 100, x, 135);
? ? ? cxt_arc.stroke();
? ? ??
? ? ? //中間字 %
? ? ? cxt_arc.beginPath();
? ? ? cxt_arc.setFontSize(10);
? ? ? cxt_arc.fillText("%", y, 135);
? ? ? cxt_arc.textAlign = 'center';
? ? ? cxt_arc.stroke();
? ? ??
? ? ? //中間字 正確率
? ? ? cxt_arc.beginPath();
? ? ? cxt_arc.setFontSize(10);
? ? ? cxt_arc.setFillStyle("#999999");
? ? ? cxt_arc.textAlign = 'center';
? ? ? cxt_arc.fillText("正確率", 130, 155);
? ? ? cxt_arc.stroke();

? ? ? cxt_arc.draw();


? ? }, 500);
? },
? /**
? ?* 自定義函數(shù)
? ?*/
? drawCircle: function (name, color) {
? ? this.setData({
? ? ? btn_color: color,
? ? ? text: name * 100
? ? })
? ? clearInterval(varName);

? ? function drawArc(s, e, x9, y9) {
? ? ? //運(yùn)動環(huán)
? ? ? ctx.setFillStyle('white');
? ? ? ctx.clearRect(0, 0, 200, 200);
? ? ? ctx.draw();
? ? ? var x = 130,
? ? ? ? y = 130,
? ? ? ? radius = 94;
? ? ? ctx.setLineWidth(15);
? ? ? ctx.setStrokeStyle(color);
? ? ? ctx.setLineCap('round');
? ? ? ctx.beginPath();
? ? ? ctx.arc(x, y, radius, s, e, false);
? ? ? ctx.stroke()
? ? ??
? ? ? //運(yùn)動白點
? ? ? ctx.beginPath();
? ? ? ctx.setStrokeStyle('#fff');
? ? ? ctx.setLineCap('round');
? ? ? ctx.setLineWidth(5);
? ? ? ctx.arc(x9, y9, 1, 0, 2 * Math.PI, false);
? ? ? ctx.stroke();
? ? ? ctx.draw()


? ? }
? ? var step = 0,
? ? ? startAngle = 0.8 * Math.PI,//開始弧度
? ? ? endAngle = 0;
? ? var animation_interval = 0,
? ? ? n = 600;


? ? var animation = function () {
? ? ? if (step <= n) {

? ? ? ? endAngle = name * (step * 1.4 * Math.PI / n) + 0.8 * Math.PI;//結(jié)束弧度
? ? ? ? var L = (1.2*Math.PI + endAngle )*94;//弧長
? ? ? ? var x = (54 - 130) * Math.cos(L / 94) - (185 - 130) * Math.sin(L / 94) + 130; //x坐標(biāo)
? ? ? ? var y = (54 - 130) * Math.sin(L / 94) + (185 - 130) * Math.cos(L / 94) + 130; //y坐標(biāo)

? ? ? ? drawArc(startAngle, endAngle, x, y);
? ? ? ? step++;
? ? ? } else {
? ? ? ? clearInterval(varName);
? ? ? }
? ? };
? ? varName = setInterval(animation, animation_interval);
? },

})

效果

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

  • 微信小程序開發(fā)之左右分欄效果的實例代碼

    微信小程序開發(fā)之左右分欄效果的實例代碼

    本文以一個簡單的小例子,簡述在微信小程序開發(fā)中左右分欄功能的實現(xiàn)方式,主要涉及scroll-view ,列表數(shù)據(jù)綁定,及簡單樣式等內(nèi)容,感興趣的朋友跟隨小編一起看看吧
    2019-05-05
  • js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容

    js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容

    這篇文章主要介紹了如何使用js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容,需要的朋友可以參考下
    2014-04-04
  • JavaScript編寫猜拳游戲

    JavaScript編寫猜拳游戲

    這篇文章主要為大家詳細(xì)介紹了JavaScript編寫猜拳游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • JS實現(xiàn)長圖上下滾動效果

    JS實現(xiàn)長圖上下滾動效果

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)長圖上下滾動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • 淺談javascript的Touch事件

    淺談javascript的Touch事件

    在本文深入研究iOS和Android設(shè)備提供的觸摸事件API,探索一下可以構(gòu)建哪些類型的應(yīng)用,給出一些最佳做法,并論及一些使得可觸控應(yīng)用(touch-enabled application)的開發(fā)變得更加容易的有用技術(shù)。
    2015-09-09
  • JavaScript數(shù)據(jù)類型和變量_動力節(jié)點Java學(xué)院整理

    JavaScript數(shù)據(jù)類型和變量_動力節(jié)點Java學(xué)院整理

    這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)類型和變量的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • 微信小程序如何修改radio和checkbox的默認(rèn)樣式和圖標(biāo)

    微信小程序如何修改radio和checkbox的默認(rèn)樣式和圖標(biāo)

    這篇文章主要介紹了微信小程序修改radio和checkbox的默認(rèn)樣式和圖標(biāo),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-07-07
  • javascript 數(shù)組使用方法匯總

    javascript 數(shù)組使用方法匯總

    由于javascript是一種無類型語言,所以一個數(shù)組的元素可以具有任意的數(shù)據(jù)類型,同一個數(shù)組的不同元素 可以具有不同的類型,數(shù)組的元素設(shè)置可以包含其他數(shù)組,這樣就可以創(chuàng)建一個復(fù)雜的數(shù)組了.
    2009-12-12
  • 最新評論