Question

我正在尝试编写一个函数，在html画布中绘制具有给定xy坐标，宽度和高度的弯曲矩形，但我的脚本当前输出一个空白画布。为什么代码没有绘制矩形？

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

Answer 1

这是因为，此行有一个不必要的方括号（]）

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 - 绘制曲线矩形的函数

1 个答案: