Реализация плавных зарисовок и рисование на <canvas> элемент
Я пытаюсь создать область рисования с помощью canvas. У меня возникают проблемы с тем, чтобы линии выглядели гладкими при рисовании кривых, и у меня также есть изменение толщины линий в моем алгоритме, который также выглядит плохо, потому что размер также сильно увеличивается, и вы можете видеть, где изменился размер. Я нашел этоссылка на стеке потока но это было для родного приложения iPhone, и я не могу понять это.
Вот мой текущий код JS. и вот оно работаетна jsFiddle
<code>var xStart, xEnd, yStart, yEnd, paint, ctx; $(document).ready(function (){ ctx = $('canvas')[0].getContext("2d"); ctx.strokeStyle = '#000'; ctx.lineJoin="round"; ctx.lineCap="round"; ctx.lineWidth = 1; $('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){ var orig = e.originalEvent; if(e.type == 'mousedown'){ e.preventDefault(); e.stopPropagation(); xStart = e.clientX - $(this).offset().left; yStart = e.clientY - $(this).offset().top; xEnd = xStart; yEnd = yStart; paint = true; draw(e.type); }else if(e.type == 'mousemove'){ if(paint==true){ xEnd = e.clientX - $(this).offset().left; yEnd = e.clientY - $(this).offset().top; lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/5; if(lineThickness > 10){ lineThickness = 10; } ctx.lineWidth = lineThickness; draw(e.type); } }else if(e.type == 'mouseup'){ paint = false; }else if(e.type == 'mouseleave'){ paint = false; }else if(e.type == 'touchstart'){ if(orig.touches.length == 1){ e.preventDefault(); e.stopPropagation(); xStart = orig.changedTouches[0].pageX - $(this).offset().left; yStart = orig.changedTouches[0].pageY - $(this).offset().top; xEnd = xStart; yEnd = yStart; paint = true; draw(e.type); } }else if(e.type == 'touchmove'){ if(orig.touches.length == 1){ if(paint==true){ xEnd = orig.changedTouches[0].pageX - $(this).offset().left; yEnd = orig.changedTouches[0].pageY - $(this).offset().top; lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/6; if(lineThickness > 10){ lineThickness = 10; } ctx.lineWidth = lineThickness; draw(e.type); } } }else if(e.type == 'touchend'){ paint = false; } }); }); function draw(event){ if(event == 'mousedown'){ ctx.beginPath(); ctx.moveTo(xStart, yStart); ctx.lineTo(xEnd, yEnd); ctx.stroke(); }else if(event == 'mousemove'){ ctx.beginPath(); ctx.moveTo(xStart, yStart); ctx.lineTo(xEnd, yEnd); ctx.stroke(); }else if(event == 'touchstart'){ ctx.beginPath(); ctx.moveTo(xStart, yStart); ctx.lineTo(xEnd, yEnd); ctx.stroke(); }else if(event == 'touchmove'){ ctx.beginPath(); ctx.moveTo(xStart, yStart); ctx.lineTo(xEnd, yEnd); ctx.stroke(); } xStart = xEnd; yStart = yEnd; } </code>
Спасибо всем заранее.
Вот как это выглядит прямо сейчас, если вы рисуете.
... и это то, что я хотел бы достичь: