canvas 圆角矩形填充_使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例

圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。

因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。

JavaScript Code复制内容到剪贴板

html>

圆角矩形

body { background: url("./images/bg3.jpg") repeat; }

#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }

你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload =function(){

varcanvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

varcontext = canvas.getContext("2d");

context.fillStyle ="#FFF";

context.fillRect(0,0,800,600);

drawRoundRect(context, 200, 100, 400, 400, 50);

context.strokeStyle ="#0078AA";

context.stroke();

}

functiondrawRoundRect(cxt, x, y,