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(); 

参考文献example in the Mozilla Developer Networkも参照してください。