24. juni 2017 - 16:20 Der er 1 løsning

canvas lineTo og shadowBlur

var elem = $('#draw'),
  letsdraw = false,
  ctx = elem[0].getContext('2d'),
  canvasOffset = elem.offset();

elem.mousedown(function(){
  letsdraw = true;
  ctx.strokeStyle = 'white';
  ctx.shadowBlur = 1;
  ctx.shadowColor = 'rgb(0, 0, 0)';
  ctx.lineWidth = 5;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
  });

elem.mousemove(function(e){
  if(letsdraw){
    ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
    ctx.stroke();
    };
  });

$(window).mouseup(function(){ letsdraw = false; });

Jeg er begyndt at rode lidt med freehand drawing på en hjemmeside.
Det er lykkedes mig at få den til at tegne en hvid streg med sorte kanter(outline).

Hvis man tegner i en lang streg og lader stregen krydse sig selv så laver den et fint x. hvor de sorte kanter gemmer sig bagved stregen - en slags outline. Men hvis man tegner to streger, så laver den kanter på den øverste streg og gemmer den anden streg nedenunder.

Er det på nogen måde muligt at efterligne effekten med krydset ved en lang streg, når man laver det som flere streger? Altså en slags outline på tegningens samlede streger.
18. marts 2018 - 14:07 #1
Ingen svar
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester