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。