HTML5中Canvas rect，strokeRect 和 fillRect 的区别

canvas问题 :

canvas rect:(x,y,width,height)此处为定义矩形路径 ，具体可以当做简便创建矩形来使用。

canvas strokeRect：（同上），用来创建矩形框；

canvas fillRect ：（同上），填充一块矩形区域。

这个可以用canvas来画，先说最简单的一种 就是给一个盒子 加上边框

方法一：html部分写一个div

<div></div>

css 部分：div{

width:200px//给200像素的宽

height:200px//给200像素的高

border:1px solid #000 //给一个边框 颜色为黑色

background:transparent// 给这个盒子一个透明的背景色

}

好了 ，这个是一个非常简单的 矩形盒子，不过通常都是用H5 的canvas来做的

方法二： html代码 ，创建canvas画布

<canvas id="myCanvas">您的浏览器不支持H5 canvas属性</canvas>

然后就是js 部分了

var c=document.getElementById("myCanvas") //获取canvas

var ctx=c.getContext("2d")创建一个2D 对象

ctx.beginPath() //

ctx.lineWidth="6"//线条宽度

ctx.strokeStyle="red"//设置为黑色

ctx.rect(5,5,290,140)//创建矩形，起始点的x y坐标，和矩形宽高

ctx.stroke() //绘制矩形（无填充） [有填充用 ctx.fill（）]

也是可以直接写

var canvas=document.getElementById('myCanvas')

var ctx=canvas.getContext('2d')

ctx.fillStyle='#FF0000'

ctx.fillRect(0,0,80,100) //起始坐标和填充色

方法三：通过绘制路径来画矩形

var c=document.getElementById("myCanvas")

var cxt=c.getContext("2d")

cxt.moveTo(10,10) //起始点

cxt.lineTo(50,10) //结束点 同时也是下一个结束点的起始点

cxt.lineTo(50,50)

cxt.lineTo(10,50)

cxt.lineTo(10,10)

cxt.stroke()

他们都接受相同的参数，见页面表格。唯一不同的实现方式与效果方面有差异。

其中fillRect()与strokeRect() 在调用后会立即在画布上画面效果，而rect()不会立即将图形画出，只有在调用了stroke()方法之后，才会实际作用于画布。

fillRect()

从字面上很好理解fillRect()与其他两个的区别，它是执行填充 *** 作。填充一个矩形区域。下面是来自W3SHOOL中文站点对它的具体参数及API的详解：

定义和用法

fillRect()方法绘制"已填色"的矩形。默认的填充颜色是黑色。

---