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 16/** 17 * 日出日落图 18 * @param context 19 * @param img 20 */ 21function initSun(context: CanvasRenderingContext2D, img) { 22 /* 23 * 根据日出日落时间点绘制 24 * 获取两个时间点 25 * 分割成一个半圆 26 * 角度换算刻度 27 * 绘制 28 */ 29 30 let begin = '日出 早上6:00' 31 let final = '日落 傍晚5:32' 32 let now = new Date() 33 let time: number = now.getHours() 34 let flag = true // 太阳是否绘制 35 let scale: number = Math.floor((time - 6) * 18 / 11) 36 if (now.getHours() < 6 || now.getHours() >= 17) { 37 flag = false 38 scale = 0 39 } 40 41 let width = context.width, height = context.height 42 43 44 // 下线 45 context.beginPath() 46 context.strokeStyle = "#33ffffff" 47 context.setLineDash([]) 48 context.moveTo(0, height - 54) 49 context.lineTo(width, height - 54) 50 context.stroke() 51 52 // 文字 53 context.font = '20px' 54 context.fillStyle = "#99ffffff" 55 context.textAlign = 'center' 56 context.textBaseline = 'middle' 57 context.fillText(begin, width / 6, height - 40) 58 59 context.font = '20px' 60 context.fillStyle = "#99ffffff" 61 context.textAlign = 'center' 62 context.textBaseline = 'middle' 63 context.fillText(final, width / 6 * 5, height - 40) 64 65 // 渐变色 66 let color = context.createLinearGradient(0, 0, width, height) 67 color.addColorStop(0, '#FFAF38') 68 color.addColorStop(scale / 18, '#DDFAD961') 69 color.addColorStop(1, '#11FFFFFF') 70 context.save() 71 context.beginPath() 72 context.lineWidth = 1 73 if (flag) { 74 context.strokeStyle = color 75 } else { 76 context.strokeStyle = '#33c0c0c0' 77 } 78 context.arc(width / 2, height - 25, width * 0.4, Math.PI / 180 * 193, Math.PI * 2 / 180 * 173, false) 79 context.setLineDash([8]) 80 context.stroke() 81 context.restore() 82 83 if (flag) { 84 drawSun() 85 } 86 // color类型string 87 function drawSun() { 88 // x为刻度线 89 context.save() 90 // 弧度*π/180 得到弧度 91 let deg = Math.PI / 180 * (193 + scale * 9) 92 let offsetX = -(Math.cos(deg) * width * 0.4) 93 let offsetY = -(Math.sin(deg) * width * 0.40) 94 95 context.drawImage(img, 0, 0, 120, 120, width / 2 - offsetX - 12, height - 37 - offsetY, 24, 24) 96 } 97} 98 99/** 100 * 月出月落图 101 * @param context 102 * @param img 103 * @param iconMoon 104 */ 105function initMoon(context: CanvasRenderingContext2D, img, iconMoon) { 106 /* 107 * 根据月出月落时间点绘制 108 * 获取两个时间点 109 * 分割成一个半圆 110 * 角度换算刻度 111 * 绘制 112 */ 113 114 let begin = '月出 傍晚5:12' 115 let final = '月落 早上6:20' 116 let now = new Date() 117 let time: number = now.getHours() 118 let flag = true // 月亮是否绘制 119 let index: number = time >= 17 ? time - 17 : time + 7 120 let scale = Math.floor(index * 18 / 13) 121 if (now.getHours() >= 6 && now.getHours() < 17) { 122 flag = false 123 scale = 0 124 } 125 126 let width = context.width, height = context.height 127 128 // 文字 129 context.font = '20px' 130 context.fillStyle = "#99ffffff" 131 context.textAlign = 'center' 132 context.textBaseline = 'middle' 133 context.fillText(begin, width / 6, height - 20) 134 135 context.font = '20px' 136 context.fillStyle = "#99ffffff" 137 context.textAlign = 'center' 138 context.textBaseline = 'middle' 139 context.fillText('上弦月', width / 2, height - 20) 140 141 context.font = '20px' 142 context.fillStyle = "#99ffffff" 143 context.textAlign = 'center' 144 context.textBaseline = 'middle' 145 context.fillText(final, width / 6 * 5, height - 20) 146 147 context.drawImage(iconMoon, 0, 0, 16, 16, width / 2 - 5, height - 45, 24, 24) 148 149 // 渐变色 150 let color = context.createLinearGradient(0, 0, width, height) 151 color.addColorStop(0, '#FFAF38') 152 color.addColorStop(scale / 18, '#DDFAD961') 153 color.addColorStop(1, '#11FFFFFF') 154 context.save() 155 context.beginPath() 156 context.lineWidth = 1 157 if (flag) { 158 context.strokeStyle = color 159 } else { 160 context.strokeStyle = '#33c0c0c0' 161 } 162 context.arc(width / 2, height - 25, width * 0.3, Math.PI / 180 * 197, Math.PI * 2 / 180 * 171, false) 163 context.setLineDash([8]) 164 context.stroke() 165 context.restore() 166 167 if (flag) { 168 drawMoon() 169 } 170 // color类型string 171 function drawMoon() { 172 // x为刻度线 173 context.save() 174 // 弧度*π/180 得到弧度 175 let deg = Math.PI / 180 * (197 + scale * 9) 176 let offsetX = -(Math.cos(deg) * width * 0.3) 177 let offsetY = -(Math.sin(deg) * width * 0.3) 178 179 context.drawImage(img, 0, 0, 120, 120, width / 2 - offsetX - 12, height - 37 - offsetY, 24, 24) 180 } 181} 182 183export { initSun, initMoon }