HTML5在画布上绘制矩形效果图。

矩形的绘图功能绘制环境可以用来绘制矩形用绘制实心矩形，strokerect画一个空心的矩形，并明确指定clearRect矩形区域，使其完全透明。示例代码如下所示。




1。画一个矩形

画布用原点（0,0）在坐标系的左上角的x坐标，越来越多的权利，和Y坐标的增加而下降。

使用绘图环境的矩形绘图功能绘制矩形。

用（x，y，宽度，高度）：画一个实心矩形。
strokerect（x，y，宽度，高度）：画一个矩形空心。
（X，Y，clearRect宽度，高度）：明确指定的矩形区域，使其完全透明。

二、在画布上画一个矩形

复制代码代码如下所示：
声明必须是HTML文档的第一行，在标签之前。>




HTML5

此函数将调用页面中的加载完全加载。
功能页面加载完成（）
{
参考 / /把画布对象的名义下画布和身体必须在同一编号
VaR的画布document.getelementbyid（'tcanvas）；
画布的二维绘制环境
VaR上下文= canvas.getcontext（二维的）；
将在此处显示绘图代码。
实心/矩形
在 / /（200,10）在一个宽度和高度图100像素的立体广场
（20010100100）context.fillrect；
在 / /（、）在绘制实心矩形宽90像素，高30像素。
context.fillrect（50,70,90,30）；
空心矩形（矩形）。
在 / /（110,10）在一个宽度和高度50像素的方框图
context.strokerect（110,10,50,50）；
在 / /（30,10）在一个宽度和高度50像素的方框图
context.strokerect（30,10,50,50）；
删除矩形区域
清亮点（210,20） / /宽的矩形面积为30像素，高20像素
context.clearrect（210,20,30,20）；
清亮点（260,20） / /宽的矩形面积为30像素，高20像素
context.clearrect（260,20,30,20）；
}





提示：您的浏览器不支持标签。




三。绘图效果