微信小程序canvas實(shí)現(xiàn)環(huán)形漸變
本文實(shí)例為大家分享了微信小程序canvas實(shí)現(xiàn)環(huán)形漸變的具體代碼,供大家參考,具體內(nèi)容如下
這個例子是在微信小程序中寫的
效果圖
后端返回的數(shù)據(jù)格式,需要的只有otherInfo里面的數(shù)據(jù)
wxml
<view> ? ? <canvas class="progress_bg" canvas-id="{{otherInfo.bgid}}"> </canvas> ? ? <canvas class="progress_canvas" canvas-id="{{otherInfo.pgid}}"> </canvas> </view> <view class="progress_text"> ? ? <text class='progress_info'> {{otherInfo.sumPointNumber || 0}}分</text> </view>
js
data:{ ? ?otherInfo: { ? ? ? bgid: "bgid", ? ? ? pgid: "pgid", ? ? ? sumPointNumber: 100 ? // 默認(rèn)圓環(huán)顯示的區(qū)域,全部顯示是100 ? ? } }
根據(jù)接口獲取數(shù)據(jù),我只截取了需要的部分,賦值到data里面的otherInfo
下面是重要的canvas部分
用arc()方法創(chuàng)建圓,起始角設(shè)置為 0,結(jié)束角設(shè)置為 2*Math.PI(PI就是圓周率π,PI是弧度制的π,也就是180°,所以,Math.PI = 3.14 = 180°,PI是一個浮小數(shù))
drawProgressbg() { ? ? let w = wx.getSystemInfoSync().screenWidth; ? ? let that = this; ? ? let ctx = wx.createCanvasContext(that.data.otherInfo.bgid) ? ? ctx.setLineWidth(8 * w / 375); ? ? ctx.setStrokeStyle('#DDEDFA'); ? ? ctx.setLineCap('round'); ? ? ctx.beginPath(); ? ? ctx.arc(80 * w / 375, 80 * w / 375, 65 * w / 375, 0, 2 * Math.PI, false); ? ? ctx.stroke(); ? ? ctx.draw(); ? }, ? drawCircle() { ? ? let w = wx.getSystemInfoSync().screenWidth; ? ? let that = this; ? ? let context = wx.createCanvasContext(that.data.otherInfo.pgid); ? ? context.setLineWidth(8 * w / 375); ? ? // context.setStrokeStyle('#55A5E6'); ? ?不漸變的背景色 ? ? // 環(huán)形漸變的背景色 ? ? var my_gradient = context.createLinearGradient(0, 0, 200, 0); ? ? my_gradient.addColorStop(1, "#FA6400"); ? ? my_gradient.addColorStop(0, "#FFECAF"); ? ? context.strokeStyle = my_gradient; ? ? context.setLineCap('round'); ? ? context.beginPath(); ? ? context.arc(80 * w / 375, 80 * w / 375, 65 * w / 375, -Math.PI / 2, that.data.otherInfo.sumPointNumber / 50 * Math.PI - Math.PI / 2, false); ? ? context.stroke(); ? ? context.draw() ? }, ? onLoad: function (options) { ? ? this.getList() ? // 獲取的數(shù)據(jù) ? ? this.drawProgressbg(); ? ? this.drawCircle() ? },
wxss
.progress_bg { ? position: absolute; ? left: 30%; ? width: 300rpx; ? height: 300rpx; ? z-index: 9; } .progress_canvas { ? left: 30%; ? width: 300rpx; ? height: 300rpx; ? z-index: 9; } .progress_text { ? display: flex;? ? align-items: center; ?justify-content: center; ?margin-top: -23%; } .progress_info { ? letter-spacing: 2rpx; ? color: #000; ? font-weight: 600; ? font-size: 38rpx; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
這篇文章主要介紹了js?fill函數(shù)填充數(shù)組或?qū)ο蟮膯栴}及解決方法,本文給大家介紹的非常詳細(xì)對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02詳解小程序中h5頁面onShow實(shí)現(xiàn)及跨頁面通信方案
這篇文章主要介紹了小程序中h5頁面onShow實(shí)現(xiàn)及跨頁面通信方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05HTML中Select不用Disabled實(shí)現(xiàn)ReadOnly的效果
Disabled ReadOnly之家的聯(lián)系2008-04-04JavaScript 獲取元素在父節(jié)點(diǎn)中的下標(biāo)(推薦)
jQuery中直接通過$(this).index()即可得到當(dāng)前元素的下標(biāo)。下面通過實(shí)例給大家介紹JavaScript 獲取元素在父節(jié)點(diǎn)中的下標(biāo),需要的朋友參考下吧2017-06-06javascript document.referrer 用法
document對象的referrer屬性,返回導(dǎo)航到當(dāng)前網(wǎng)頁的超鏈接所在網(wǎng)頁的URL。2009-04-04js網(wǎng)頁中隨意拖動的小方塊實(shí)現(xiàn)代碼
用CSS和JS制作的在網(wǎng)頁中可以隨意拖動的小方塊。2008-08-08js內(nèi)置對象處理_打印學(xué)生成績單的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨s內(nèi)置對象處理_打印學(xué)生成績單的簡單實(shí)現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09JavaScript 獲取當(dāng)前日期時間 年月日 時分秒的方法
這篇文章主要介紹了JavaScript 獲取當(dāng)前日期時間年月日時分秒的方法,通過案例代碼介紹了獲取當(dāng)前日期方法,代碼簡單易懂,需要的朋友可以參考下2023-10-10