Здравствуйте. У меня проблема - я уже много времени потратил впустую.
Задача такая - нужно чтобы линии отрисовки секторов были поверх секторов заливки и были эти линии только черного цвета и не еле прозрачные. 054 строка кода как раз начинается отрисовка здесь - в цикле проблема.Помогите, ребят.
С уважением, countervector.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas в HTML5</title>
</head>
<body onload='draw()'>
<canvas id='canvas' height='800' width='1000'></canvas>
<script>
</script>
<script>
function draw() {
var contex = document.getElementById('canvas').getContext('2d');
var img = new Image();
var R1=320.0;
var R2=260.0;
var R3=220.0;
var delta=330.0;
var p1=(2*Math.PI)/366;
var p2=(2*Math.PI)/(24*366);
var x1 = [366+1];
var y1 = [366+1];
var x2 = [366+1];
var y2 = [366+1];
var x3 = [366*24+1];
var y3 = [366*24+1];
var x4 = [366*24+1];
var y4 = [366*24+1];
for(var i=0;i<=366;i++){
y1[i]=R1*(Math.sin(i*p1))+delta;
x1[i]=R1*(Math.cos(i*p1))+delta;
y2[i]=R2*(Math.sin(i*p1))+delta;
x2[i]=R2*(Math.cos(i*p1))+delta;
y3[i]=R2*(Math.sin(i*p2))+delta;
x3[i]=R2*(Math.cos(i*p2))+delta;
y4[i]=R3*(Math.sin(i*p2))+delta;
x4[i]=R3*(Math.cos(i*p2))+delta;
}
contex.beginPath();
contex.lineWidth=1; // толщина линии
contex.strokeStyle = "#000000"; //цвет линии
//отрисовка кругов и перемычек (здесь проблема отрисовка нужно чтобы была поверх полигонов)
for(var i=0;i+1<=366;i++){
contex.moveTo(x1[i],y1[i]);
contex.lineTo(x1[i+1],y1[i+1]);
contex.moveTo(x2[i],y2[i]);
contex.lineTo(x2[i+1],y2[i+1]);
contex.moveTo(x3[i],y3[i]);
contex.lineTo(x3[i+1],y3[i+1]);
//рисуем перемычки между кольцами
contex.moveTo(x1[i],y1[i]);
contex.lineTo(x2[i],y2[i]);
}
var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff = (now - start) + ((start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000);
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay);
contex.beginPath();
for(var i=0;i+1<=366;i++){
//заполняем сектора (полигоны) желтым цветом
contex.fillStyle = "#ffbb00"; //цвет линии
contex.beginPath();
contex.moveTo(x1[i], y1[i]);
contex.lineTo(x1[i+1],y1[i+1]);
contex.lineTo(x2[i+1], y2[i+1]);
contex.lineTo(x2[i], y2[i]);
contex.closePath();
contex.fill();
}
contex.beginPath();
for(var ii=0;ii<=day;ii++){
//заполняем сектора (полигоны) зеленым цветом
contex.fillStyle = "#39e600"; //цвет линии
contex.beginPath();
contex.lineCap = "round"; // закругляем наконечник
contex.stroke();
contex.moveTo(x1[ii], y1[ii]);
contex.lineTo(x1[ii+1],y1[ii+1]);
contex.lineTo(x2[ii+1], y2[ii+1]);
contex.lineTo(x2[ii], y2[ii]);
contex.closePath();
contex.fill();
}
//пишем буквы (String);
contex.fillStyle = "#000000";
contex.strokeStyle = "black";
contex.lineWidth = 1;
contex.font = "100px sans-serif";
contex.fillText("Hello", 50, 100);
contex.strokeText("Hello", 50, 100);
}
</script>
</body>
</html>