【报Bug】canvas标签在onLoad()函数里被操作时，ios将不会渲染canvas的画布，界面一片空白

示例代码：

<template>  
    <view>  
        <view>你好 这里是onLoad</view>  
        <view>  
        <canvas canvas-id="astrologyBase" style="height: 1000rpx;width: 1000rpx;">  
        <canvas canvas-id="astrologyBase1" style="height: 1000rpx;width: 1000rpx;">  
        <canvas canvas-id="astrologyBase2" style="height: 1000rpx;width: 1000rpx;" @click="clickStar">  
        <view class="signReminder" :style="{display:displayReminder}">  
             <view class="reminderTitle flex-row-box">  
                 <view class="starNameRow" :style="{color:clickedStarColor}">{{clickedStarName}}</view>  
                 <view class="starMovementRow">{{clickedStarMovement}}落在</view>  
                 <view class="starSignRow" :style="{color:clickedStarSignColor}">{{clickedStarSign}}</view>  
                 <view class="starSignLonRow">{{clickedStarLon}}</view>  
             </view>  
             <view class="reminderAspects flex-row-box" v-for="(item,key) in clickedStarAspects">与  
                             <view class="toStarRow" :style="{color:calToStarColor(item.toStar)}">{{item.toStar}}</view>  
                             成  
                             <view class="aspectRow" :style="{color:calAspectColor(item.aspect)}">{{item.aspect}}º</view>  
                             <view class="movementRow">{{item.movement}}</view>  
                             <view class="sepRow">{{item.sep}}</view>  
             </view>  
        </view>  
        </canvas></canvas>  
        </canvas>  
        </view>  
    </view>  
</template>  

<script>  
    const red = "#FF0000"  
    const yellow = "#F6AE1A"  
    const green = "#7CEB19"  
    const blue = "#0AA5DA"  
    const lightBlue = "#90E9E1"  
    const purple = "#9933FA"   
    const lightGrey = "#D1CFCC"  
    const darkGrey = "#71706D"  
    const lightPurple = "#6A59A6"  
    // const grey =""  
    const darkBlue = "#0E0D44"  
    const white = "#F6F6F9"  
    const lightWhite = "##E5DFD7"   
    const black = "#101015"  
    const lightYellow = "#D9B45D"  
    const lightLightYellow = "#E3CF9D"  
    const signs = ["羊","牛","双","蟹","狮","处","秤","蝎","射","摩","瓶","鱼"]  
    const signColors = {  
        "羊":red,  
        "牛":yellow,  
        "双":green,  
        "蟹":blue,  
        "狮":red,  
        "处":yellow,  
        "秤":green,  
        "蝎":blue,  
        "射":red,  
        "摩":yellow,  
        "瓶":green,  
        "鱼":blue  
    }  
    const fullSigns = ["白羊座","金牛座","双子座","巨蟹座","狮子座","处女座","天秤座","天蝎座","射手座","摩羯座","水瓶座","双鱼座"]  
    const planetChar = {  
        "ascendant":"升",  
        "sun":"日",  
        "moon":"月",  
        "mercury":"水",  
        "venus":"金",  
        "mars":"火",  
        "jupiter":"木",  
        "saturn":"土",  
        "uranus":"天",  
        "neptune":"海",  
        "pluto":"冥",  
        "northnode":"北",  
        "southnode":"南"  
    }  
    const aspectColor = {  
        180:purple,  
        60:blue,  
        90:red,  
        0:yellow,  
        120:green,  
        135:yellow  
    }  
    const planetFullName = {  
        "升":"上升点",  
        "日":"太阳",  
        "月":"月亮",  
        "水":"水星",  
        "金":"金星",  
        "火":"火星",  
        "木":"木星",  
        "土":"土星",  
        "天":"天王星",  
        "海":"海王星",  
        "冥":"冥王星",  
        "北":"北交点"  
    }  
    const nodePlanets = ["ascendant","northnode"]  
    const planetColor = {  
        "ascendant":red,  
        "sun":red,  
        "moon":blue,  
        "mercury":green,  
        "venus":yellow,  
        "mars":red,  
        "jupiter":red,  
        "saturn":yellow,  
        "uranus":green,  
        "neptune":blue,  
        "pluto":blue,  
        "northnode":lightBlue  
    }  
    const planetChineseToEnglish = {  
        "上升点":"ascendant",  
        "太阳":"sun",  
        "月亮":"moon",  
        "水星":"mercury",  
        "金星":"venus",  
        "火星":"mars",  
        "木星":"jupiter",  
        "土星":"saturn",  
        "天王星":"uranus",  
        "海王星":"neptune",  
        "冥王星":"pluto",  
        "北交点":"northnode"  
    }   

    const movementEnglishToChinese = {  
        "Direct":"[顺行]",  
        "Retrograde":"[逆行]",  
        "none":""  
    }  
    export default {  
        onLoad(){  
            console.log("Received param")  
            // console.log(options)  
            // var pages = getCurrentPages();  
            // var page = pages[pages.length - 1];  
            // const opt = decodeURIComponent(page.options);  
            // console.log(opt)  
            // console.log(opt.chartId)  
            // console.log('opt',opt);  
            // console.log(options)  
            // console.log("Reviced:"+val)  
            // let chartId= JSON.parse(val.chartId)  
            // console.log("Received chart is :"+chartId)  
            // uni.request({  

            // })  
            const circleLineColor = darkGrey  
            const backgroundColor = black  
            const midheavenColor = lightGrey  
            const signLineColor =  darkGrey  
            const housesLineColor = darkGrey  
            const houseTextColor = darkGrey  
            const houses = this.houses  
            let ascendantDict = {"ascendant":{  
                    "movement":"none",  
                    "lon":houses[0],  
                }}  
            const planetsInfo = Object.assign(ascendantDict,this.planetsInfo)  
            let ariesDegrees = houses[0]  
            let planetReminder = {}  
            var aspectFloat = {  
                180:8,  
                60:6,  
                90:8,  
                0:10,  
                120:6,  
                135:6  
            }  
            var lowMidHeavenDegrees = 3*30+17+27/60  
            // x的极限应该是200   
            // 先画外圈  
            let platform=uni.getSystemInfoSync().platform  
            var middlePointX = 188;  
            if (platform.includes("ios")){  
                middlePointX = 195;  
            }  
            var middlePointY = 200;  
            var firstCircleRidus = 180;  
            if (platform.includes("ios")){  
                firstCircleRidus = 190;  
            }  
            var secondCircleRidus = 160;  
            var thirdCircleRidus = 140;  
            var planetCircleRidus = 120;  
            var pointCircleRidus = 1;  
            var ariesPointXStart = middlePointX + thirdCircleRidus;  
            var ariesPointYStart = middlePointY;  
            var ariesPointXEnd = middlePointX-thirdCircleRidus;  
            var ariesPointYEnd = middlePointY;  
            // let contextBaseItem = uni.h  
            var contextBase = uni.createCanvasContext('astrologyBase')  
            contextBase.setStrokeStyle(circleLineColor)  
            contextBase.setLineWidth(1)  
            contextBase.arc(middlePointX, middlePointY, firstCircleRidus, 0, 2 * Math.PI)  
            contextBase.stroke()  
            contextBase.setFillStyle(backgroundColor)  
            contextBase.fill()  
            contextBase.draw()  
            // 画箭头  
            // 再画里圈  

            var contextBase1 = uni.createCanvasContext('astrologyBase1')  
            contextBase1.setStrokeStyle(circleLineColor)  
            contextBase1.setLineWidth(1)  
            contextBase1.arc(middlePointX, middlePointY, secondCircleRidus, 0, 2 * Math.PI)  
            contextBase1.stroke()  
            contextBase1.draw()  

            //再一层里圈  
            var contextBase2 = uni.createCanvasContext('astrologyBase2')  
            contextBase2.setStrokeStyle(circleLineColor)  
            contextBase2.setLineWidth(1)  
            contextBase2.arc(middlePointX, middlePointY, thirdCircleRidus, 0, 2 * Math.PI)  
            contextBase2.stroke()  
            // contextBase2.draw()  

            // 画上升星座线  
            contextBase2.beginPath()  
            contextBase2.setStrokeStyle(midheavenColor)  
            contextBase2.setLineWidth(1)  
            contextBase2.moveTo(ariesPointXStart,ariesPointYStart)  
            contextBase2.lineTo(ariesPointXEnd,ariesPointYEnd)  
            contextBase2.stroke()  
            // contextBase2.draw()  
            // 画小箭头 画线到上末梢   
            // contextBase2.beginPath()  
            contextBase2.moveTo(ariesPointXEnd,ariesPointYEnd)  
            contextBase2.lineTo(ariesPointXEnd+7,ariesPointYEnd-4)  
            contextBase2.lineTo(ariesPointXEnd+5,ariesPointYEnd)  
            contextBase2.setFillStyle(midheavenColor)  
            contextBase2.fill()  
            contextBase2.moveTo(ariesPointXEnd,ariesPointYEnd)  
            contextBase2.lineTo(ariesPointXEnd+7,ariesPointYEnd+4)  
            contextBase2.lineTo(ariesPointXEnd+5,ariesPointYEnd)  
            contextBase2.fill()  
            // contextBase2.draw()  
            // // 先算白羊座起点  
            // // 白羊 金牛 双子 巨蟹 狮子 处女 天秤 天蝎 射手 摩羯 水瓶 双鱼  
            // // 0 1 2 3 4 5 6 7 8 9 10 11  
            // 上升星座是双子座0度50分 那么白羊座的起点  
            // 50分+双子到白羊的度数 则是50分+（双子-白羊）*30度 则是60度50分  
            for (var i=0;i<12;i++) {  
                // 则最外圈白羊宫起点上点到水平轴的x,y距离为  
                // var outerPointX ,var outerPointY =   
                var ret =  this.getPointxPointYByDegreeAndRadius(ariesDegrees,firstCircleRidus,middlePointX,middlePointY)  
                var outerPointX = ret[0]  
                var outerPointY = ret[1]  
                // 则次外圈白羊宫起点上点到水平轴的x,y距离为  
                var ret = this.getPointxPointYByDegreeAndRadius(ariesDegrees,secondCircleRidus,middlePointX,middlePointY)  
                var innerPointX = ret[0]  
                var innerPointY = ret[1]  
                contextBase2.beginPath()  
                contextBase2.setStrokeStyle(signLineColor)  
                contextBase2.setFontSize(12)  
                contextBase2.moveTo(outerPointX,outerPointY)  
                contextBase2.lineTo(innerPointX,innerPointY)  
                contextBase2.stroke()  
                var sign = signs[i]  
                contextBase2.setStrokeStyle(signColors[sign])  
                contextBase2.setFillStyle(signColors[sign])  
                contextBase2.setTextAlign("center")  
                var textDegree = ariesDegrees - 15  
                var textRadius = (firstCircleRidus - secondCircleRidus)/2 + secondCircleRidus  
                var ret = this.getPointxPointYByDegreeAndRadius(textDegree,textRadius,middlePointX,middlePointY)  
                contextBase2.fillText(sign,ret[0],ret[1])  
                ariesDegrees -= 30   
            }  

            var radiusTmp = thirdCircleRidus + (secondCircleRidus - thirdCircleRidus)/2  
            for (var i=0;i<12;i++){  
                var tmpDegree = ariesDegrees - houses[i]   
                var ret =  this.getPointxPointYByDegreeAndRadius(tmpDegree,secondCircleRidus,middlePointX,middlePointY)  
                var outerPointX = ret[0]  
                var outerPointY = ret[1]  
                // 则次外圈白羊宫起点上点到水平轴的x,y距离为  
                var ret = this.getPointxPointYByDegreeAndRadius(tmpDegree,thirdCircleRidus,middlePointX,middlePointY)  
                var innerPointX = ret[0]  
                var innerPointY = ret[1]  
                contextBase2.beginPath()  
                contextBase2.setStrokeStyle(housesLineColor)  
                contextBase2.setLineWidth(0.5)  
                contextBase2.moveTo(outerPointX,outerPointY)  
                contextBase2.lineTo(innerPointX,innerPointY)  
                contextBase2.stroke()  
                contextBase2.setFillStyle(houseTextColor)  
                contextBase2.setTextAlign("center")  
                if (houses[i+1] < houses[i]){  
                    var textTmpDegree = tmpDegree - (360 - houses[i] + houses[i+1])/2  
                }   
                else{  
                    var textTmpDegree = tmpDegree - (houses[i+1] - houses[i])/2  
                }  
                if (i==11){  
                    textTmpDegree = tmpDegree + (360 - tmpDegree%360)/2  
                }  
                var ret =  this.getPointxPointYByDegreeAndRadius(textTmpDegree,radiusTmp,middlePointX,middlePointY)  
                // contextBase2.moveTo()  
                contextBase2.fillText(i+1,ret[0],ret[1])  
                contextBase2.moveTo(middlePointX,middlePointY)  
                contextBase2.setFillStyle(housesLineColor)  
                contextBase2.lineTo(innerPointX,innerPointY)  
                contextBase2.stroke()  

            }  
            // 画中天星座线  
            if (houses[0] > houses[3]){  
                var tmpDegree =  houses[0]-houses[3]  
            }  
            else{  
                var tmpDegree =  houses[3]-houses[0]  
            }  
            var ret = this.getPointxPointYByDegreeAndRadius(tmpDegree,thirdCircleRidus,middlePointX,middlePointY)  
            contextBase2.beginPath()  
            contextBase2.setStrokeStyle(midheavenColor)  
            contextBase2.setLineWidth(1)  
            contextBase2.moveTo(ret[0],ret[1])  
            var ret = this.getPointxPointYByDegreeAndRadius(tmpDegree-180,thirdCircleRidus,middlePointX,middlePointY)  
            var midheavenPointXEnd = ret[0]  
            var midheavenPointYEnd = ret[1]  
            contextBase2.lineTo(midheavenPointXEnd,midheavenPointYEnd)  
            contextBase2.stroke()     
            var tmpRadius = Math.sqrt(Math.pow(thirdCircleRidus-7,2) + 4*4)  
            var radiusTmp = this.getPointxPointYByDegreeAndRadius(tmpDegree-180,thirdCircleRidus-5,middlePointX,middlePointY)  
            var radiusTmp2 = this.getPointxPointYByDegreeAndRadius(tmpDegree-180+1.72344,tmpRadius,middlePointX,middlePointY)  
            contextBase2.moveTo(midheavenPointXEnd,midheavenPointYEnd)  
            contextBase2.lineTo(radiusTmp[0],radiusTmp[1])  
            contextBase2.lineTo(radiusTmp2[0],radiusTmp2[1])  
            contextBase2.setFillStyle(midheavenColor)  
            contextBase2.fill()  
            var radiusTmp = this.getPointxPointYByDegreeAndRadius(tmpDegree-180,thirdCircleRidus-5,middlePointX,middlePointY)  
            var radiusTmp2 = this.getPointxPointYByDegreeAndRadius(tmpDegree-180-1.72344,tmpRadius,middlePointX,middlePointY)  
            contextBase2.moveTo(midheavenPointXEnd,midheavenPointYEnd)  
            contextBase2.lineTo(radiusTmp[0],radiusTmp[1])  
            contextBase2.lineTo(radiusTmp2[0],radiusTmp2[1])  
            contextBase2.setFillStyle(midheavenColor)  
            contextBase2.fill()  
            var planetBeCompare = Object.keys(planetsInfo)  
            var allAspectsDict = {}  
            for (var key in planetsInfo) {  
                var planetName = key;  
                var planetLon = planetsInfo[key]["lon"]  
                var degreeCurent = houses[0]-planetLon  
                if (key != "ascendant"){  
                    var ret = this.getPointxPointYByDegreeAndRadius(degreeCurent,planetCircleRidus,middlePointX,middlePointY)  
                }  
                else{  
                    var ret = this.getPointxPointYByDegreeAndRadius(degreeCurent,thirdCircleRidus,middlePointX,middlePointY)  
                }  
                var pointX = ret[0]  
                var pointY = ret[1]  
                var color = planetColor[key]  
                contextBase2.setFillStyle(color)  
                console.log(key)  
                let planetAbbreviation = planetChar[key]  
                console.log(planetAbbreviation+":"+pointX+pointY)  
                if (key != "ascendant"){  
                    contextBase2.fillText(planetAbbreviation,pointX,pointY)  
                }  
                let tmpDict = {}  
                tmpDict["Name"] = key  
                tmpDict["PointX"] = pointX  
                tmpDict["PointY"] = pointY  
                let signIndex = Math.floor(planetLon/30)  
                let signLon = planetLon%30  
                tmpDict["Sign"] = fullSigns[signIndex]  
                tmpDict["Lon"] = signLon  
                tmpDict["Movement"] = planetsInfo[key]["movement"]  
                planetReminder[planetAbbreviation] = tmpDict  
                contextBase2.beginPath()  
                var ret= this.getPointxPointYByDegreeAndRadius(degreeCurent,planetCircleRidus-10,middlePointX,middlePointY)  
                var pointCirclePointX = ret[0];  
                var pointCirclePointY = ret[1];  
                contextBase2.arc(ret[0],ret[1], pointCircleRidus, 0, 2 * Math.PI)  
                contextBase2.setStrokeStyle(color)  
                contextBase2.stroke()  
                // delete planetBeCompare[planetBeCompare.indexOf(key)]  
                let keyFullName = planetFullName[planetChar[key]]  
                allAspectsDict[keyFullName] = []  
                for (var i = 0; i < planetBeCompare.length; i++){  
                    let keyTo = planetBeCompare[i]  
                    var keyToLon = planetsInfo[keyTo]["lon"]  
                    if (key==keyTo){  
                        continue  
                    }  
                    var aspect = this.calculateAsepct(key,keyTo,planetLon,keyToLon)  
                    if (aspect){  
                        let toStarFullName = planetFullName[planetChar[keyTo]]  
                        let tmpDict = {  
                            "toStar": toStarFullName,  
                            "aspect": aspect[0],  
                            "sep": aspect[1],  
                            "movement":aspect[2]  
                        }  
                        // console.log(tmpDict)  
                        allAspectsDict[keyFullName].push(tmpDict)  
                        // console.log("Aspects:"+allAspectsDict)  
                        // console.log(key + "has " + aspect + "with ",keyTo)  
                        var degreeTo = houses[0]-keyToLon  
                        var ret= this.getPointxPointYByDegreeAndRadius(degreeTo,planetCircleRidus-12,middlePointX,middlePointY)  
                        var pointX = ret[0]  
                        var pointY = ret[1]  
                        var ret= this.getPointxPointYByDegreeAndRadius(degreeCurent,planetCircleRidus-12,middlePointX,middlePointY)  
                        contextBase2.beginPath()  
                        contextBase2.moveTo(ret[0],ret[1])  
                        contextBase2.setLineWidth(0.5)  
                        // console.log("Color is")  
                        // console.log(aspectColor[aspect])  
                        // console.log(aspectColor)  
                        // console.log(aspect)  
                        contextBase2.setStrokeStyle(aspectColor[aspect[0]])  
                        contextBase2.lineTo(pointX,pointY)  
                        contextBase2.stroke()  
                    }}  

                };  
                contextBase2.draw()  
                this.starReminderDict = planetReminder  
                this.starAspects = allAspectsDict  
                console.log(this.starAspects)  
            },        
            // console.log(planetReminder)  
        // },  
        data() {  
            return {  
                aspectFloat:{  
                    180:8,  
                    60:6,  
                    90:8,  
                    0:10,  
                    120:6,  
                    135:6  
            },  
            displayReminder:"none",  
            currentClickPoint:[1,3],  
            starReminderDict:{  
            },  
            clickFloatDistance:15,  
            clickedStarName:"土星",  
            clickedStarMovement:"顺行",  
            clickedStarSign:"水瓶",  
            clickedStarLon:"29.",  
            clickedStarEnglishName:"sun",  
            starAspects:{  
                "土星":[  
                {"toStar":"月亮",  
                 "aspect":"120",  
                 "sep":"27.64'",  
                 "movement":"[出相]"}  
            ]  
            },  
            houses:[272.1773454634695, 304.6096423614845, 339.9930469780151, 17.470419866696318, 43.98854682528787, 68.67621882437282, 92.17734546346952, 124.60964236148448, 159.99304697801517, 197.47041986669632, 223.98854682528787, 248.67621882437282],  
            planetsInfo : {  
                "sun":{  
                    "movement":"Direct",  
                    "lon":247.64187797282707,  
                    "lonspeed":1.013204559684923  
                },  
                "moon":{  
                    "movement":"Direct",  
                    "lon":134.48161381405743,  
                    "lonspeed":11.806610599066223  
                },  
                "mercury":{  
                    "movement":"Direct",  
                    "lon":255.2785210886062,  
                    "lonspeed":1.5523554682489793  
                },  
                "venus":{  
                    "movement":"Direct",  
                    "lon":234.24702949048088,  
                    "lonspeed":1.2561345807784798  
                },  
                "mars":{  
                    "movement":"Direct",  
                    "lon":318.43316748000086,  
                    "lonspeed":0.739566788073047  
                },  
                "jupiter":{  
                    "movement":"Direct",  
                    "lon":207.04473109562798,  
                    "lonspeed":0.1887381906551107  
                },  
                "saturn":{  
                    "movement":"Retrograde",  
                    "lon":33.13016105758175,  
                    "lonspeed":-0.05848905814438692  
                },  
                "uranus":{  
                    "movement":"Direct",  
                    "lon":187.893599491354,  
                    "lonspeed":0.039039827358364934  
                },  
                "neptune":{  
                    "movement":"Direct",  
                    "lon":238.78010411090722,  
                    "lonspeed":0.03728346525681352  
                },  
                "pluto":{  
                    "movement":"Direct",  
                    "lon":177.13376149951085,  
                    "lonspeed":0.01682071880527952  
                },  
                "northnode":{  
                    "movement":"Retrograde",  
                    "lon":346.97919443384336,  
                    "lonspeed":-0.0529445872864015  
                }  
            }  
        }},  
        computed:{  
            clickedStarColor(){  
                // console.log("Englishname : "+ this.clickedStarEnglishName)  
                return planetColor[this.clickedStarEnglishName];  
            },  
            clickedStarSignColor(){  
                return signColors[signs[fullSigns.indexOf(this.clickedStarSign)]];  
            },  
            clickedStarAspects(){  
                return this.starAspects[this.clickedStarName];  
            }},  
        methods: {  
                    getPointxPointYByDegreeAndRadius(degrees,radius,middlePointX,middlePointY){  
                        var sina = Math.sin(degrees * (Math.PI / 180))  
                        var cosina = Math.cos(degrees * (Math.PI / 180))  
                        var yDistance = radius*sina  
                        var xDistance = radius*cosina  
                        var outerPointX = middlePointX - xDistance  
                        var outerPointY = middlePointY - yDistance  
                        return [outerPointX,outerPointY]  
                    },  
                    canvasIdErrorCallback: function (e) {  
                        console.error(e.detail.errMsg)  
                    },  
                    clickStar(e){  
                        if (this.displayReminder == "none"){  
                            this.judgeIfClickTheStar(e.detail.x,e.detail.y)  
                            // this.displayReminder = "yes"           
                        }else{  
                            this.displayReminder = "none"  
                        }  
                    },  
                    calToStarColor(toStar){  
                        return planetColor[planetChineseToEnglish[toStar]]  
                    },  
                    calAspectColor(aspect){  
                        return aspectColor[aspect]  
                    },  
                    judgeIfClickTheStar(x,y){  
                        for (let star in this.starReminderDict){  
                            let starPointX = this.starReminderDict[star]["PointX"];  
                            let starPointY = this.starReminderDict[star]["PointY"];  
                            // console.log("x: " + x)  
                            // console.log("y: "+ y)  
                            // console.log(star)  
                            // console.log(starPointX+":"+starPointY)  
                            let xUpper = starPointX + this.clickFloatDistance  
                            let xLower = starPointX - this.clickFloatDistance  
                            let yUpper = starPointY + this.clickFloatDistance  
                            let yLower = starPointY - this.clickFloatDistance  
                            // console.log(xUpper+":"+xLower+":"+yUpper+":"+yLower)  
                            if ( xUpper >= x && x >= xLower && yUpper >= y &&  
                            y >= yLower){  
                                // console.log(this.starReminderDict)  
                                let starMovement = this.starReminderDict[star]["Movement"];  
                                let starLon = this.starReminderDict[star]["Lon"];  
                                let starEnglishName = this.starReminderDict[star]["Name"]  
                                let starName = planetFullName[planetChar[starEnglishName]]  
                                let starSign = this.starReminderDict[star]["Sign"]  
                                let starLonChar = this.calArcStr(starLon)  
                                this.displayReminder = "inline"  
                                // console.log(this.displayReminder)  
                                this.clickedStarEnglishName = starEnglishName  
                                this.clickedStarName = starName;  
                                // console.log("Star movement:"+starMovement)  
                                this.clickedStarMovement = movementEnglishToChinese[starMovement];  
                                this.clickedStarLon = starLonChar;  
                                this.clickedStarSign = starSign  
                                // console.log("star sign is")  
                                // console.log(starSign)  
                                // console.log("Yes !!!!!!")  
                            }  
                        }  
                    },  
                    calculateAsepct(planet1Char,planet2Char,lon1,lon2){  
                        // console.log(planet1Char,planet2Char,lon1,lon2)  
                        // console.log(typeof(this.aspectFloat))  
                        this.calRoundArc(lon1)  
                        var aspectFloatUsed = this.aspectFloat  
                        // console.log("Aspect float used is ",aspectFloatUsed)  
                        if (planet1Char in ["uranus","neptune","pluto"] && planet2Char in ["uranus","neptune","pluto"]){  
                            aspectFloatUsed = {  
                                180:1,  
                                90:1,  
                                0:1,  
                                60:1,  
                                135:1,  
                                120:1  
                            };  
                        }  
                        for (var i in aspectFloatUsed){  
                            i = i - 0  
                            var largest = i+aspectFloatUsed[i];  
                            var smallest = i-aspectFloatUsed[i];  
                            var currentLon = Math.abs(lon1-lon2)  
                            if (largest>=currentLon &&  currentLon>=smallest){  
                                let orb = this.calArcStr(Math.abs(currentLon-i))  
                                if ((nodePlanets.indexOf(planet2Char) != -1)||(nodePlanets.indexOf(planet1Char) != -1)){  
                                    // console.log("Node"+planet1Char+";"+planet2Char)  
                                    return [i+"",orb,""]  
                                }  
                                let movement = this.calAspectMovement(planet1Char,planet2Char,i)  
                                return [i+"",orb,movement]  
                            }  
                        }  
                        return null   
                    },  
                    calRoundArc(lon){  
                        // console.log("Cal  "+lon)  
                        let slist = [0, 0, 0, 0]  
                        let value = Math.abs(lon)  
                        for (let i=0;i<=4;i++){  
                            slist[i] = Math.floor(value)  
                            value = (value - slist[i]) * 60  
                        }  
                        // console.log(slist)  
                        slist[-1] = slist[-1] >= 30?60:0  
                        for (let i=slist.length-1;i>1;i--){  
                            if (slist[i] == 60){  
                                slist[i] = 0  
                                slist[i-1] += 1}  
                            }  
                        return slist.slice(0,2)  
                    },  
                    calArcStr(lon){  
                        let lonList = this.calRoundArc(lon)  
                        // console.log("Lon list")  
                        // console.log(lonList)  
                        return lonList[0]+"º"+lonList[1]+"'"  
                    },  
                    calAspectMovement(planet1Char,planet2Char,asepct){  
                        // console.log("planetsinfo")  
                        // console.log(this.planetsInfo)  
                        // console.log("planet12 is")  
                        // console.log(planet1Char+":"+planet2Char)  
                        let planetsInfo = this.planetsInfo  
                        let speed1 = Math.abs(this.planetsInfo[planet1Char]["lonspeed"])  
                        let speed2 = Math.abs(this.planetsInfo[planet2Char]["lonspeed"])  
                        if (speed1>speed2){  
                            var activeObject = planet1Char  
                            var passiveObject = planet2Char  
                        }else{  
                            var activeObject = planet2Char  
                            var passiveObject = planet1Char  
                        }  
                        let passiveInfo = planetsInfo[passiveObject]  
                        let activeInfo = planetsInfo[activeObject]  
                        let movement = "[出相]"  
                        let tmp = passiveInfo["lon"] - activeInfo["lon"]  
                        if (tmp<=180){  
                            let sep = tmp  
                        }  
                        else{  
                            let sep = tmp-360  
                        }  
                        let sep = Math.abs(sep)  
                        let orbDir = sep >= 0?sep-asepct:sep+asepct  
                        if ((orbDir>0 && activeInfo["movement"]=="Direct")|| (orbDir<0 && activeInfo["movement"]=="Retrograde")){  
                            movement = "[入相]"  
                        }  
                        console.log("Movement is:"+movement)  
                        return movement  
                    }             
        }  
    }  
</script>  
<style>  
    .signReminder  
    {  
        left:300rpx;  
        top: 300rpx;  
        position: absolute;  
        background-color: white;  
        border-radius: 15rpx;  
        padding: 25rpx;  
    /*  display: none; */  
    }  
/*  .starSignRow{  
        font-size: 200%;  
    } */  
</style>

操作步骤：

在onLoad()函数里对canvas标签进行操作

预期结果：

ios手机端正常渲染

实际结果：

ios手机端并未渲染canvas标签