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。