html5 stroke,HTML canvas strokeRect()用法及代码示例

strokeRect()方法用于以给定颜色绘制矩形。笔划的默认颜色是黑色。

用法:

context.strokeRect(x, y, width, height)

参数：

x:它存储矩形左上角的x坐标。

y:它存储矩形左上角的y坐标。

width:它以像素为单位存储宽度。

height:它以像素为单位存储高度。

示例1：

HTML canvas strokeRect() Method

width="500"

height="300">

var x =

document.getElementById("GFG");

var contex = x.getContext("2d");

contex.strokeRect(50, 50, 350, 200);

contex.stroke();

输出：

示例2：

HTML canvas

strokeRect() Method

width="500"

height="300">

var x =

document.getElementById("GFG");

var contex =

x.getContext("2d");

contex.strokeStyle = "green";

contex.strokeRect(50, 50, 350, 200);

contex.strokeStyle = "red";

contex.strokeRect(100, 100, 250, 100);

contex.stroke();

输出：

支持的浏览器：

谷歌浏览器

Internet Explorer 9.0

火狐浏览器

苹果浏览器

Opera