Đột quỵ đường đôi trong html5 canvas

Question

Tôi muốn vẽ hình dạng có đường viền hai đường bằng cách sử dụng đường dẫn canvas html5 canvas. Đột quỵ mặc định (context.stroke()) có một kiểu đường dẫn đơn. Tôi có thể vẽ một hình dạng tương tự bên trong một hình dạng ban đầu để tạo ra một con số trông giống như một hình được làm bằng hai đường biên giới, nhưng tôi muốn một số loại giải pháp chung. Bất kỳ ý tưởng?

Answer 1

Có một số cách để thực hiện việc này. Một cách đơn giản là vẽ một đường mỡ và "cắt bỏ" giữa nó, để lại hai nét nhỏ hơn.

Những gì bạn muốn làm là vẽ bất kỳ loại đường - trên một trong bộ nhớ, tạm vải - và sau đó vẽ cùng một con đường với độ dày ít hơn và với globalCompositeOperation thiết lập để destination-out trên cùng canvas.

Điều đó sẽ giúp bạn có được hình dạng bạn muốn, về cơ bản là 2 dòng có độ trong suốt giữa chúng.

Sau đó, bạn vẽ canvas đó lên canvas thực có bất kỳ thứ gì trên đó (nền phức tạp, v.v ...).

Dưới đây là một ví dụ:

http://jsfiddle.net/uTbsC/