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

另请参阅Mozilla Developer Network 中的此示例。