canvas rect()
rect() 方法用于创建矩形。
提示：请使用 stroke() 在画布上实际绘制矩形，或使用 fill() 方法在画布上实际地填充矩形。
JavaScript 语法：context.rect(x,y,width,height);
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计，所以不需要，也不能再带单位 |
| height | 矩形的高度，以像素计，所以不需要，也不能再带单位 |
编码示例
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>直线运动</title>
<style type="text/css">
.divContent {
display: inline-block;
width: 300px;
height: 300px;
background-color: #333333;
margin-left: 100px;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="module">
/**画第一个九宫格矩形
* canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
* ctx：画布上下文
*/
let drawRect1 = function (canvas, ctx) {
/**矩形绘制的颜色*/
let colorArrays = [
"#FFCC66", "#CC00FF", "#996633",
"#3366CC", "#330000", "#FFFF66",
"#000099", "#FF3300", "#007700"
];
/**每个单元格矩形的颜色索引*/
let index = 0;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
/**其它的内容都是辅助，真正绘制矩形的核心代码就是下面 3 步*/
/**1）beginPath() 方法开始一条路径，或重置当前的路径。比如 矩形、圆形等*/
ctx.beginPath();
/**2）lineWidth 属性设置或返回当前线条的宽度，以像素计，不能再带单位。
* strokeStyle：设置画笔当前的颜色
* */
ctx.lineWidth = "2";
ctx.strokeStyle = colorArrays[index++];
/**3）rect() 方法创建矩形,起点坐标动态改变，长宽为画布的三分之一
* 这样的就是一个九宫格，而且随着画布尺寸的变化而变化
* stroke() 实际绘制已定义的路径*/
ctx.rect(j * canvas.width / 3,
i * canvas.height / 3,
canvas.width / 3,
canvas.height);
ctx.stroke();
}
}
}
/**画第一个九宫格矩形
* canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
* ctx：画布上下文
*/
let drawRect2 = function (canvas, ctx) {
/**矩形绘制的颜色*/
let colorArrays = [
"#FFCC66", "#CC00FF", "#996633",
"#3366CC", "#330000", "#FFFF66",
"#000099", "#FF3300", "#007700"
];
/**这里用于随机切换一下两个单元格的颜色*/
let x = 0, y = 0;
while (x == y) {
x = Math.round(Math.random() * 8);
y = Math.round(Math.random() * 8);
}
let temp = colorArrays[x];
colorArrays[x] = colorArrays[y];
colorArrays[y] = temp;
let index = 0;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
/**其它的内容都是辅助，真正绘制矩形的核心代码就是下面 3 步*/
/**1）beginPath() 方法开始一条路径，或重置当前的路径。比如 矩形、圆形等*/
ctx.beginPath();
/**2）lineWidth 属性设置或返回当前线条的宽度，以像素计，不能再带单位。
* strokeStyle：设置画笔当前的颜色
* */
ctx.lineWidth = "2";
ctx.fillStyle = colorArrays[index++];
/**3）rect() 方法创建矩形,起点坐标动态改变，长宽为画布的三分之一
* 这样的就是一个九宫格，而且随着画布尺寸的变化而变化
* stroke() 实际绘制已定义的路径*/
ctx.rect(j * canvas.width / 3,
i * canvas.height / 3,
canvas.width / 3,
canvas.height);
ctx.fill();
}
}
setTimeout(function () {
drawRect2(canvas, ctx);
}, 1000);
}
$(function () {
/**获取第一张画布*/
let canvas1 = document.getElementById("myCanvas1");
/**为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
* 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
* 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
* */
canvas1.width = $(".divContent").css("width").replace("px", "");
canvas1.height = $(".divContent").css("height").replace("px", "");
/**获取画布上下文*/
let ctx1 = canvas1.getContext("2d");
drawRect1(canvas1, ctx1);
/**获取第二张画布*/
let canvas2 = document.getElementById("myCanvas2");
canvas2.width = $(".divContent").css("width").replace("px", "");
canvas2.height = $(".divContent").css("height").replace("px", "");
/**获取画布上下文*/
let ctx2 = canvas2.getContext("2d");
drawRect2(canvas2, ctx2);
});
</script>
</head>
<body>
<div class="divContent">
<canvas id="myCanvas1">
浏览器不支持 Canvas
</canvas>
</div>
<div class="divContent">
<canvas id="myCanvas2">
浏览器不支持 Canvas
</canvas>
</div>
</body>
</html>