1/* 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16export function initRound(context: CanvasRenderingContext2D, air) { 17 let width = context.width 18 let height = context.height 19 // 百分比转换 20 let percent = +air.airQuality * 2 / 100 + 0.5 21 // 背景 22 context.save() 23 context.beginPath() 24 context.lineWidth = 8 25 context.lineCap = 'round' 26 context.strokeStyle = "#33FFFFFF" 27 context.arc(width / 2, width / 2, width / 2 - 10, Math.PI * 0.3, Math.PI * 0.7, true) 28 context.stroke() 29 context.closePath() 30 context.restore() 31 32 // 绘制圆环 33 context.save() 34 context.lineWidth = 8 35 context.lineCap = 'round' 36 context.beginPath() 37 // 渐变色 38 let color = context.createLinearGradient(0, 0, width, height) 39 color.addColorStop(0, '#AED34A') 40 color.addColorStop(0.5, '#82CD61') 41 color.addColorStop(1, '#82CD61') 42 context.strokeStyle = color 43 44 context.arc(width / 2, width / 2, width / 2 - 10, Math.PI * 0.7, Math.PI * percent, false) 45 context.stroke() 46 context.closePath() 47 context.restore() 48 49 // 中间文字 50 context.font = '22px' 51 context.fillStyle = "#ffffff" 52 context.textAlign = 'center' 53 context.textBaseline = 'middle' 54 context.fillText(air.airDesc, width / 2, height / 2 - 20) 55 56 // 中间文字 57 context.font = '48px' 58 context.fillStyle = "#ffffff" 59 context.textAlign = 'center' 60 context.textBaseline = 'middle' 61 context.fillText(air.airQuality, width / 2, height / 2 + 5) 62 63 context.font = '20px' 64 context.fillStyle = "#99ffffff" 65 context.textAlign = 'center' 66 context.textBaseline = 'middle' 67 context.fillText('0', width / 2 - 30, height - 5) 68 69 context.font = '20px' 70 context.fillStyle = "#99ffffff" 71 context.textAlign = 'center' 72 context.textBaseline = 'middle' 73 context.fillText('500', width / 2 + 25, height - 5) 74}