关于canvas绘制线性圆角矩形，不是背景色填充类型

// 封装一个函数，将用来绘制圆角矩形

function drawRoundRect(cxt, x, y, width, height, radius){
    cxt.beginPath();
    cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
    cxt.lineTo(width - radius + x, y);
    cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
    cxt.lineTo(width + x, height + y - radius);
    cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
    cxt.lineTo(radius + x, height +y);
    cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
    cxt.closePath();
}

// 获得参数

var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,200,200);  // 画了一个矩形框

drawRoundRect(context, 200, 200, 150, 30, 4);

// 这里的参数表示：context必不用说，200，200， 表示的是矩形的左上角距离canvas的左顶点

//的距离，150，30 表示的是所 要绘制的矩形的宽高，4表示的是radius
context.strokeStyle = "#0078AA";
context.stroke();

特此记录