Question

Tôi có một ví dụ ở đây

http://jsfiddle.net/8NzjH/

Tôi đang cố gắng để vẽ một đường trung dày như sau:

var context = canvas.getContext("2d"); 
context.strokeStyle = '#000000'; 
context.fillStyle = '#000000'; 

context.moveTo(10, 10); 
context.lineTo(50, 10); 

context.save(); 
context.lineWidth = 15; 
context.moveTo(10, 30); 
context.lineTo(50, 30); 
context.restore(); 

context.moveTo(10, 50); 
context.lineTo(50, 50); 

context.stroke(); 

Những gì tôi làm là tiết kiệm bối cảnh, thay đổi độ rộng đường thẳng, vẽ dòng và sau đó khôi phục ngữ cảnh. Tuy nhiên độ dày của tất cả các dòng là như nhau. Tôi đang làm gì sai?

Answer 1

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/

Answer 2

Ứng dụng có hoạt động như mong đợi không?

http://jsfiddle.net/8NzjH/1/

context.lineWidth = 15; 
context.stroke();