Bạn cần phải bắt đầu một con đường mới với beginPath()
cho mỗi dòng, thiết lập lineWidth
và sau đó stroke()
dòng cho mỗi.
Dưới đây là một điều chỉnh (fiddle dưới đây):
var context = canvas.getContext("2d");
context.strokeStyle = '#000000';
context.beginPath();
context.moveTo(10, 10);
context.lineTo(50, 10);
context.lineWidth = 2;
context.stroke();
//context.save(); no need to do this
context.beginPath();
context.lineWidth = 15;
context.moveTo(10, 30);
context.lineTo(50, 30);
context.stroke();
context.beginPath();
context.moveTo(10, 50);
context.lineTo(50, 50);
context.lineWidth = 2;
context.stroke();
Nếu bạn không sử dụng beginPath()
bạn sẽ chỉ vẽ lại tất cả các dòng trên một lần nữa mà làm chậm tất cả mọi thứ xuống qua khóa học. Nếu tất cả các dòng có cùng độ dày bạn có thể đã sử dụng một đơn beginPath()
ngay từ đầu.
Bạn cũng có thể sắp xếp lại mã để các dòng với cùng độ dày được nhóm lại với nhau dưới một con đường vv Ví dụ:
context.beginPath(); //begin here
context.lineWidth = 2; //common width for the next two lines
context.moveTo(10, 10);
context.lineTo(50, 10);
context.moveTo(10, 50);
context.lineTo(50, 50);
context.stroke(); //stroke here to draw them
context.beginPath(); //start new path for new thickness
context.lineWidth = 15;
context.moveTo(10, 30);
context.lineTo(50, 30);
context.stroke();
Không cần để save()
/restore()
bối cảnh nếu bạn chỉ điều chỉnh một tham số hoặc hai miễn là bạn theo dõi chúng (như ở đây chúng tôi đặt lineWidth
cho mỗi lần. Điều này hiệu quả hơn trong trường hợp này).
tùy ý chỉ làm một chức năng như:
function drawLine(ctx, x1, y1, x2, y2, width, color) {
if (typeof width === 'number') ctx.lineWidth = width;
if (typeof color === 'string') ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
Cách sử dụng:
drawLine(context, 0, 0, 100, 100); //width and color is optional
drawLine(context, 0, 0, 100, 100, 10);
drawLine(context, 0, 0, 100, 100, 10, '#f00');
Corrected fiddle:
http://jsfiddle.net/AbdiasSoftware/8NzjH/4/
phiên bản Bố trí lại:
http://jsfiddle.net/AbdiasSoftware/8NzjH/5/
"Tôi đang cố gắng vẽ một đường thẳng dày như sau:" – Wex
Không hoàn toàn tôi đã hy vọng để có được chỉ là một ở giữa dày. Tôi đã cố gắng cập nhật mã của bạn nhưng bây giờ hai mã đầu tiên là http://jsfiddle.net/8NzjH/3/ – Hoa