html - HTML5 ペイント ブラシのヒント

Question

丸いブラシ先端を取得しようとしていますが、以下のコードは線の形状のブラシ先端を作成します。

context.lineWidth = 1;
context.lineCap = "round";

丸い筆先を手に入れるには？

Answer 1

キャンバスへのパスを描画し、に設定lineCapするだけroundです。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(10, 10);
context.lineTo(canvas.width/2, canvas.height / 2);
context.lineWidth = 10;
context.strokeStyle = "red";
context.lineCap = "round";
context.stroke();

MozillaDeveloperNetworkのこの例も参照してください。