Проблема приоритета слоев отрисовки
Здравствуйте. У меня проблема - я уже много времени потратил впустую.
Задача такая - нужно чтобы линии отрисовки секторов были поверх секторов заливки и были эти линии только черного цвета и не еле прозрачные. 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> |
Так?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas в HTML5</title> </head> <body> <canvas id='canvas' height='800' width='1000'></canvas> <script> 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; } 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(); } //отрисовка кругов и перемычек (здесь проблема отрисовка нужно чтобы была поверх полигонов) contex.lineWidth = 1; // толщина линии contex.strokeStyle = "#000000"; //цвет линии for (var i = 0; i + 1 <= 366; i++) { contex.beginPath(); 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]); contex.stroke(); } //пишем буквы (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> |
Nexus,
Только я вижу артефакты на 3, 6, 9, 12 часов? |
Rise,
Цитата:
|
Nexus,
Так видишь или нет артефакты то, я же про это спросил, а не про то писал автор про них или нет, у меня просто свой интерес можно ли от них избавиться, то ли это иллюзия зрения понять не могу? UPD: Не не иллюзия, повернул на 45 градусов в редакторе, артефакты переместились. |
Rise, извини, неправильно понял.
Нет, не иллюзия. Я их тоже наблюдаю. |
Nexus,
В векторе такая же фигня. <!DOCTYPE html> <html> <head> <title>SVG dashed circle</title> </head> <body> <svg width="640" height="640"> <circle cx="320" cy="320" r="290" fill="none" stroke="#ffbb00" stroke-width="60" /> <circle cx="320" cy="320" r="290" fill="none" stroke="#000000" stroke-width="60" stroke-dasharray="1 4" /> </svg> </body> </html> Кстати, в растре также можно. <!DOCTYPE html> <html> <head> <title>Canvas dashed circle</title> </head> <body> <canvas width="640" height="640"></canvas> <script> var ctx = document.querySelector('canvas').getContext('2d'); ctx.translate(320, 320); ctx.arc(0, 0, 290, 0, 2 * Math.PI); ctx.lineWidth = 60; ctx.strokeStyle = "#ffbb00"; ctx.stroke(); ctx.setLineDash([1, 4]); ctx.strokeStyle = "#000000"; ctx.stroke(); </script> </body> </html> UPD: А если масштабировать страницу, артефакты то исчезают, то приобретают другие формы, видимо сглаживание в браузере так устроено, странно только почему вектор также искажается как растр. |
Цитата:
|
laimas,
Мне всегда казалось, что линии в векторе как-то выглядят более четко, из-за какого-то особого алгоритма, поэтому и хорошо подходит для разных иконок, значков, графиков, карт, схем, не только же наверное дело в масштабировании... тогда бы SVG можно было просто назвать SG. Как бы само название масштабируемая векторная графика (Scalable Vector Graphics - SVG), подразумевает что графика также может быть не масштабируемая векторная, ну так если логически подумать. |
Rise,
никто не спорит, что масштабирование вектора и растра вещи разные, оно и понятно, ибо у второго при операциях неизбежны потери на границах переходов. Но ведь вектор сам по себе ничего не несет, это всего лишь "границы в которых ..." так же. И нельзя сравнить svg залитую локальным цветом, хотя бы с примерами выше, при равных условиях при масштабировании результаты естественно будут разными. Даже текст, это вектор залитый локальным цветом и тот не всегда хорошо выглядит. Плюс физические особенности устройств, например тот же текст на ЭЛТ и матричном экране выглядит по разному. А как бы не рисовалось, пусть и с привлечением GPU конечный результат это растр, и все решают методы интерполяции. Ну и мы видим не так как компьютер, наш мозг легко обмануть анимацей, которая на самом деле статическая картинка. Вот мы и видим одно и тоже в разных ракурсах/разворотах по разному. Или, из недавнего что меня удивило. Есть две картинки, они разные по размеру и по преобладающим цветам. Обе уменьшаются по ширине до 1000px. Все это на канве в JS. Затем на них рисуется пунктирная линия в 1px шириной в градациях серого, почти близко к белому. Вопрос - одинаково ли должна выглядеть такая линия на этих изображениях? Я вижу на одной из них линию шириной в 2px, а на другой четкую в 1px. Так в один или в два пикселя шириной нарисовал линию компьютер? Просто линия, а вы удивляетесь почему "зебра в мелкую полоску" разная. :) |
Часовой пояс GMT +3, время: 09:38. |