我正在尝试编写一个函数,在 html Canvas 内绘制一个具有给定 xy 坐标、宽度和高度的弯曲矩形,但我的脚本当前输出一个空白 Canvas 。为什么代码没有绘制矩形?
var c=document.getElementById(id);
var ctx=c.getContext('2d');
function makeCurvedRect(x, y, w, h) {
ctx.beginPath();
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h - 10]);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.stroke();
}
makeCurvedRect(162.5,40,175,175);
最佳答案
这是因为,这一行有一个不必要的方括号(]
)
ctx.quadraticCurveTo(x, y+h, x, y+h - 10]);
^ this
这会导致代码中断
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
function makeCurvedRect(x, y, w, h) {
ctx.beginPath();
ctx.moveTo(x + 10, y);
ctx.lineTo(x + w - 10, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + 10);
ctx.lineTo(x + w, y + h - 10);
ctx.quadraticCurveTo(x + w, y + h, x + w - 10, y + h);
ctx.lineTo(x + 10, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - 10);
ctx.lineTo(x, y + 10);
ctx.quadraticCurveTo(x, y, x + 10, y);
ctx.stroke();
}
makeCurvedRect(60, 60, 175, 175);
canvas {
border: 1px solid black;
}
<canvas id="canvas" width="300" height="300"></canvas>
关于Javascript - 绘制曲线矩形的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43586323/