Basic Stroke

On this page, we build a basic stroke class that turns a path and a width into drawable geometry, along with a few simple variations.

このページでは、パスと線幅から描画用の形状を作る基本的なストローククラスと、そのシンプルなバリエーションをいくつか作ります。

Every demo below draws the same path at the same three positions, so the only difference is how the strokes are rendered. See Pencils, Brushes and Paints for the techniques behind emulating the look of real drawing media.

以下のデモでは、どれも同じパスを同じ3か所に描画しています。違うのは、ストロークの描画方法だけです。実際の画材の見た目を再現する技法については、鉛筆、筆、絵の具のページをご覧ください。

Basic strokes

open full size ↗

A flat ribbon along the path, filled with one color and closed at both ends by a cap. This is the shape every other renderer starts from.

パスに沿って帯状の形を作り、単色で塗りつぶして両端をキャップで閉じます。他のすべての描画方式も、この形をベースにしています。

Brush strokes

open full size ↗

The same ribbon, shaded per pixel as bristles rather than filled. Each stroke carries two pigments instead of one.

同じ帯状の形を単色で塗りつぶす代わりに、ピクセルごとに陰影をつけて筆の毛の筋を表現します。それぞれのストロークには、1色ではなく2色の顔料を使います。

Dry brush

open full size ↗

A stiff, dragged brush that catches on the paper's tooth and breaks into grain. The three rows are fine, medium, and coarse grain from top to bottom, at increasing tooth scale.

硬い筆を引きずるように動かし、紙の凹凸に引っかかって粒状にかすれる筆跡を表現します。3つの段は、上から順に細目、中目、粗目に対応し、紙の凹凸のスケールが大きくなっています。

Shadow strokes

open full size ↗

Effects around the mark: a drop shadow, a debossed bevel, and a glow from top to bottom.

筆跡のまわりに加える効果です。上から順に、ドロップシャドウ、縁に傾斜をつけたくぼみの表現、グロー（光彩）です。

Try drawing

open full size ↗

Try drawing freely with the tools on this page.

このページのツールで自由に描いてみましょう。