我是 HTML5 Canvas 的新手,我正在尝试绘制一个带圆角的三角形。
我试过了
ctx.lineJoin = "round";
ctx.lineWidth = 20;
Run Code Online (Sandbox Code Playgroud)
但他们都没有工作。
这是我的代码:
ctx.lineJoin = "round";
ctx.lineWidth = 20;
Run Code Online (Sandbox Code Playgroud)
var ctx = document.querySelector("canvas").getContext('2d');
ctx.scale(5, 5);
var x = 18 / 2;
var y = 0;
var triangleWidth = 18;
var triangleHeight = 8;
// how to round this triangle??
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + triangleWidth / 2, y + triangleHeight);
ctx.lineTo(x - triangleWidth / 2, y + triangleHeight);
ctx.closePath();
ctx.fillStyle = "#009688";
ctx.fill();
ctx.fillStyle = "#8BC34A";
ctx.fillRect(0, triangleHeight, 9, 126); …Run Code Online (Sandbox Code Playgroud)