画画像油漆一样
我有三个arrys：
clickX = [], clickY = [], clickDrag = []; 这是你点击时发生的事情：
$('#canvasCursor').mousedown(function (e) { console.log('down'); mouseX = e.pageX - this.offsetLeft; mouseY = e.pageY - this.offsetTop; paint = true; addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); redraw(); });
这里它将点击添加到数组并绘制：
function redraw（）{ctx.clearRect（0,0，ctx.canvas.width，ctx.canvas.height）; //清除canvas
ctx.strokeStyle = "green"; ctx.lineJoin = "round"; ctx.lineWidth = brushSize*2; for (var i = 0; i < clickX.length; i++) { ctx.beginPath(); if (clickDrag[i] && i) { ctx.moveTo(clickX[i - 1], clickY[i - 1]); } else { ctx.moveTo(clickX[i] - 1, clickY[i]); } ctx.lineTo(clickX[i], clickY[i]); ctx.closePath(); ctx.stroke(); } }
我试图摆脱现在这样做的数组方式，因为当我使用滑块动态更改var brushSize时，它会重新绘制新大小的整个图片，而不是当时的大小。 我不知道如何保存数组中任何特定对象的大小，然后将它们分开绘制。
我不介意，如果我不能实现这种方式给我的撤销function，只要我可以修复画笔大小的变化。 在这里你可以看到我在撒谎！ http://www.taffatech.com/Paint.html
– 它似乎更慢，我猜它，因为它从数组绘图
不要将绘画存储到数组中
它严重减慢了绘图速度。 只需绘制最新的一行而不清除canvas。 这样lineWeight更改不会影响到绘图之前。 所以删除ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 并for循环。 您也可能只想在发生更改时更改上下文样式（lineWidth等），而不是每次运行redraw()函数时。
撤消支持
为每个鼠标按下会话制作不同的canvas并将它们一起绘制，您可以轻松地进行撤消function。 通过按下撤消，它只是将最新的canvas拼接出canvas数组。 Google要了解有关绘制到临时canvas的更多信息。
编辑 ：对不起，修正了一些拼写错误编辑2 ：再次。 测试有点困难。
每次都没有理由重新绘制每个点。 您可以修改您的侦听器来执行此操作：
var prevMouseX=null,prevMouseY=null; $('#canvasCursor').mousedown(function (e) { paint = true; console.log('down'); //get current mouse coords mouseX = e.pageX - this.offsetLeft; mouseY = e.pageY - this.offsetTop; if (prevMouseX==null) { //store these coordinates for next time if they haven't been defined yet prevMouseX = mouseX; prevMouseY = mouseY; } }); $('#canvasCursor').mousemove(function (e) { //get current mouse coords mouseX = e.pageX - this.offsetLeft; mouseY = e.pageY - this.offsetTop; if (prevMouseX==null) { //store these coordinates for next time if they haven't been defined yet prevMouseX = mouseX; prevMouseY = mouseY; } if (paint) {drawline(mouseX,mouseY,prevMouseX,prevMouseY);} //store these coordinates for next time prevMouseX = mouseX; prevMouseY = mouseY; });
函数drawLine定义为：
function drawline(x1,y1,x2,y2) { ctx.strokeStyle = "green"; ctx.lineJoin = "round"; ctx.lineWidth = brushSize*2; ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.closePath(); ctx.stroke(); }
这是如何使用canvas绘制像Paint
如果需要撤消function，最佳选择是记录用户绘制的所有线段。
这是通过包含用户绘制的所有点（折线）的点arrays完成的。
要跟踪画笔大小和画笔颜色，您还需要在数组中包含此信息。
因此，数组的每个元素都将包含有关每个线段的信息：
- x：此线段的结束x坐标
- y：结束y坐标
- size：画笔大小（lineWidth）
- 颜色：画笔颜色（strokeStyle）
- mode：“begin”表示新行的开头，“end”表示该行的结束。
它是如何工作的？
当用户拖动绘制线段时，每个mousemove事件都使用context.lineTo和context.stroke扩展当前段。
当用户选择新的BrushSize或BrushColor时，context.beginPath启动context.beginPath 。
当用户按住“撤消”按钮时，最后一个线段中的最后一个点将从点arrays中弹出。 然后重绘所有幸存的线段。 按住按钮时，撤销按钮每1/10秒触发一次。
这是代码和小提琴： http ： //jsfiddle.net/m1erickson/AEYYq/
Drag to draw. Use buttons to change lineWidth/color