자바 스크립트 - 곡선 직사각형 플롯 기능

Question

주어진 xy 좌표, 너비 및 높이를 가진 html 캔버스에서 곡선 사각형을 그리지 만 현재 스크립트는 빈 캔버스를 출력하고 있습니다. 코드가 사각형을 그리지 않는 이유는 무엇입니까?

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>