html5 paint,javascript – 使用HTML5 Canvas为绘画应用创建逼真的铅笔工具

您可以尝试类似以下演示的内容

您最有可能使用moveTo和lineTo来创建路径,如果以这种方式执行,则在关闭路径之前将为路径共享属性.因此,每当您更改厚度时,您需要再次调用closePath然后再调用beginPath.

在我的例子中,我使用Bresenham’s line algorithm绘制点.基本上,它开始绘画.然后onmousemove它将当前坐标与最后一个坐标进行比较,并绘制其间的所有点.它还使用fillRect来绘画.根据您移动线的速度有多快或更薄.

下面是绘图功能的代码

var canvas = document.getElementById("canvas"),

ctx = canvas.getContext("2d"),

painting = false,

lastX = 0,

lastY = 0,

lineThickness = 1;

canvas.width = canvas.height = 600;

ctx.fillRect(0, 0, 600, 600);

canvas.onmousedown = function(e) {

painting = true;

ctx.fillStyle = "#ffffff";

lastX = e.pageX - this.offsetLeft;

lastY = e.pageY - this.offsetTop;

};

canvas.onmouseup = function(e){

painting = false;

}

canvas.onmousemove = function(e) {

if (painting) {

mouseX = e.pageX - this.offsetLeft;

mouseY = e.pageY - this.offsetTop;

// find all points between

var x1 = mouseX,

x2 = lastX,

y1 = mouseY,

y2 = lastY;

var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));

if (steep){

var x = x1;

x1 = y1;

y1 = x;

var y = y2;

y2 = x2;

x2 = y;

}

if (x1 > x2) {

var x = x1;

x1 = x2;

x2 = x;

var y = y1;

y1 = y2;

y2 = y;

}

var dx = x2 - x1,

dy = Math.abs(y2 - y1),

error = 0,

de = dy / dx,

yStep = -1,

y = y1;

if (y1 < y2) {

yStep = 1;

}

lineThickness = 5 - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;

if(lineThickness < 1){

lineThickness = 1;

}

for (var x = x1; x < x2; x++) {

if (steep) {

ctx.fillRect(y, x, lineThickness , lineThickness );

} else {

ctx.fillRect(x, y, lineThickness , lineThickness );

}

error += de;

if (error >= 0.5) {

y += yStep;

error -= 1.0;

}

}

lastX = mouseX;

lastY = mouseY;

}

}