小编Joh*_*Doe的帖子

带圆角的html5画布三角形

我是 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)

html javascript canvas

3
推荐指数
3
解决办法
2542
查看次数

标签 统计

canvas ×1

html ×1

javascript ×1