微信小程序canvas實現(xiàn)環(huán)形漸變

更新時間：2022年08月28日 11:55:24 作者：花笙_

這篇文章主要為大家詳細介紹了微信小程序canvas實現(xiàn)環(huán)形漸變，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序canvas實現(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 ? // 默認圓環(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: