JS - Canvas - Полупрозрачные линии

154
06 мая 2019, 19:00

На канвасе рисую два контура прямоугольника непрозрачным цветом. В двух местах прямоугольники пересекаются, и по идее, второй(верхний) прямоугольник должен перекрывать первый(нижний), но их контуры почему то смешиваются. 

const c=document.getElementById("myCanvas"); 
const ctx=c.getContext("2d"); 
ctx.strokeStyle="red"; 
ctx.strokeRect(20,20,150,100); 
ctx.strokeStyle="gray"; 
ctx.strokeRect(50,50,200,200);
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Answer 1

Отрисовывай свои однопиксельные линии в координатах вроде ctx.lineTo(10.5, 10.5). Рисование однопиксельных линий в координатах (10, 10) значит, что этот 1 пиксель находится в координатах с 9.5 до 10.5, что приводит к рисованию двух линий на канвасе.

Интересный способ не прибавлять каждый раз 0.5 к настоящим координатам, если много однописксельных линий, использовать ctx.translate(0.5, 0.5) в самом начале.

перевод ответа @allan

const c = document.getElementById("myCanvas"); 
const ctx = c.getContext("2d"); 
ctx.translate(0.5, 0.5); 
 
ctx.strokeStyle = "red"; 
ctx.strokeRect(20, 20, 150, 100); 
ctx.strokeStyle = "gray"; 
ctx.strokeRect(50, 50, 200, 200);
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Answer 2

Антиалиасин

const c=document.getElementById("myCanvas"); 
const ctx=c.getContext("2d"); 
ctx.lineWidth=10; 
ctx.strokeStyle="red"; 
ctx.strokeRect(20,20,150,100); 
ctx.strokeStyle="gray"; 
ctx.strokeRect(50,50,200,200);
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

READ ALSO
Как создать bar чарты со scatter в react-highcharts?
javascript

Как создать bar чарты со scatter в react-highcharts?

Использую данную библиотеку чартов, со stacked-bar чартами проблем небыло - подкидываю в рендер компоненту:

 146
Поймать событие по клику на элемент JS
javascript

Поймать событие по клику на элемент JS

по работе приходится иметь дело с одним online сервисом ( на bootstrap), функционал у них немного хромает и хотелось бы его немного допилитьТ

 150
Модифицировать метод
javascript

Модифицировать метод

У меня есть

 127
userscript js переход по ссылке
javascript

userscript js переход по ссылке

пишу юзерскрипт для игры

 157