Вам нужно получить значение из localStorage с помощью
highscore = +localStorage.getItem("highscore")
или какого-либо эквивалентного кода. Элементы в localStorage
не отслеживают глобальные переменные с одинаковыми именами.
Чтобы избежать странных результатов, в сложных формах я бы предпочел выполнить рисование в два этапа:
Примечание : При рисовании дуг вам нужно знать, что
blockquote>ctx.arc()
создастline
от последних координат текущего пути до первой позиции дуги. Чтобы этого избежать, вам нужно позвонитьmoveTo()
, чтобы поднять перо для рисования в первую позицию дуги.
var elementDetail = {"element":[{"type":"ARC","x1":510,"y1":10,"x2":74.585653306513848,"y2":74.585653306514814,"r":1500,"xm":510,"ym":1510,"alpha":4.4178734952765524,"beta":4.71238898038469,"color":2},{"type":"ARC","x1":74.585653306514587,"y1":74.585653306514928,"x2":10,"y2":510,"r":1500,"xm":1510,"ym":510,"alpha":3.1415926535897931,"beta":3.43610813869793,"color":2},{"type":"ARC","x1":10,"y1":510,"x2":74.585653306514587,"y2":945.41434669348541,"r":1500,"xm":1510,"ym":510,"alpha":2.8470771684816563,"beta":3.1415926535897931,"color":2},{"type":"ARC","x1":74.585653306514871,"y1":945.41434669348541,"x2":510,"y2":1010,"r":1500,"xm":510,"ym":-490,"alpha":1.5707963267948966,"beta":1.8653118119030334,"color":2},{"type":"ARC","x1":510,"y1":1010,"x2":945.4143466934853,"y2":945.41434669348541,"r":1500,"xm":510,"ym":-490,"alpha":1.2762808416867597,"beta":1.5707963267948966,"color":2},{"type":"ARC","x1":945.41434669348541,"y1":945.41434669348541,"x2":1010,"y2":510,"r":1500,"xm":-490,"ym":510,"alpha":0,"beta":0.29451548510813697,"color":2},{"type":"ARC","x1":1010,"y1":510,"x2":945.41434669348519,"y2":74.585653306514132,"r":1500,"xm":-490,"ym":510,"alpha":5.9886698220714489,"beta":6.2831853071795862,"color":2},{"type":"ARC","x1":945.41434669348553,"y1":74.585653306514587,"x2":510,"y2":10,"r":1500,"xm":510,"ym":1510,"alpha":4.71238898038469,"beta":5.006904465492827,"color":2},{"type":"POINT","x1":510,"y1":510,"color":7}]} let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d") // draw the solid body ctx.beginPath(); elementDetail.element.map((elem, index) => { ctx.moveTo(0,0); ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta); }) ctx.fillStyle = "#6fd0ff"; ctx.fill(); ctx.closePath(); // draw the outline elementDetail.element.map((elem, index) => { ctx.beginPath(); ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta); ctx.stroke(); }) ctx.closePath();
canvas{ zoom:.25}
<canvas id="myCanvas" width="1200" height="1200"></canvas>
Вы пытались использовать context.fillStyle="your shape colour"
? Я думаю, что вы можете использовать путь для создания фигуры, поэтому каждый раз, когда вы начинаете путь, вам нужно назначить цвет для каждой фигуры. Попробуйте нарисовать дугу и многоугольник отдельно.
function drawGraphics(ctx){
ctx.beginPath();
ctx.fillStyle="#6fd0ff"
elementDetail.element.reverse().map((elem, index) => {
if(elem.type==="ARC"&&index<=8){
ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);
}
})
ctx.stroke()
ctx.fill();
ctx.closePath();
}