绘制矩形
本章我们来一起学习如何绘制一个矩形，矩形是我们在开发时遇到的非常常见的一种图形，所以这个是基本功，所以是一定要掌握的，当然也很简单，话不多说、Go、Go、Go
<div>
<button id="clear">清除</button>
<button id="fill">画一个填充的矩形</button>
<button id="stroke">画一个镂空的矩形</button>
</div>
<canvas id="container" width="1000" height="600">
当前浏览器不兼容，请下载最新版本浏览器
</canvas>
获取canvas上下文对象canvas.getContext("2d")，参数暂且写成2d,其他暂且不管
const canvas = document.getElementById("container");
const context = canvas.getContext("2d");
绘制一个填充的矩形
语法：context.fillRect(x, y, width, height);
在画布的(x,y)处绘制一个width * height的填充矩形
const fillBtn = document.getElementById("fill");
fillBtn.addEventListener("click", function () {
context.fillRect(0, 0, 100, 100);
// 也可以这样拆分着写
context.rect(110, 0, 100, 100);
context.fill();
});
语法：context.strokeRect(x, y, width, height);
在画布的(x,y)处绘制一个width * height的镂空矩形
const strokeBtn = document.getElementById("stroke");
strokeBtn.addEventListener("click", function () {
context.strokeRect(10, 10, 100, 100);
// 也可以这样拆分着写
context.rect(120, 10, 100, 100);
context.stroke();
});
beginPath 与 closePath
当我们在绘制时，beginPath就像我们把画笔放到画板上，closePath就像我们画了一条线后，停止并抬起画笔，在canvas中也是一样的，当我们绘制完一个图形后，需要抬起画笔，不然程序会认为次还没有画完，可以接着往下画，这样就会出现一些奇怪的重叠或者bug
- beginPath 开始绘制
- closePath 结束绘制
这里发生重叠的实际上是上一个填充红色图形的轮廓，因为没有抬起画笔，所以程序认为你会接着绘制，就不会停止，相当于笔一直放在画板上，所以要在绘制前写上开始与结束
context.beginPath();
context.strokeRect(10, 10, 100, 100);
// …………to do
context.closePath();
context.beginPath();
context.fillRect(0, 0, 100, 100);
// …………to do
context.closePath();
用线段绘制一个矩形
- context.moveTo(x,y) // 移动到点位
- context.lineTo(x,y) // 绘制一条线段到点位
const lineBtn = document.getElementById("line");
lineBtn.addEventListener("click", function () {
context.clearRect(0, 0, 1000, 600);
context.beginPath();
context.moveTo(100, 100); // 将画笔移动至画布的（x,y）点处
context.lineTo(100, 200); // 绘制一条到(100,200)的线段
context.lineTo(200, 200); // 绘制一条到(200,200)的线段
context.lineTo(200, 100); // 绘制一条到(200,100)的线段
// context.fill() // 如果在未画完一个矩形时，使用颜色填充，会自动封闭
context.lineTo(100, 100); // 回到原点，形成一个封闭的矩形
context.stroke(); // 加入路径
context.closePath();
});
完整代码
<div>
<button id="clear">清除</button>
<button id="fill">画一个填充的矩形</button>
<button id="stroke">画一个镂空的矩形</button>
<button id="line">用线段画一个矩形</button>
</div>
<canvas id="container" width="1000" height="600"></canvas>
<script>
const canvas = document.getElementById("container");
const context = canvas.getContext("2d");
// 清除按钮
const clearBtn = document.getElementById("clear");
clearBtn.addEventListener("click", function () {
context.clearRect(0, 0, 1000, 600);
});
// 画填充的矩形
const fillBtn = document.getElementById("fill");
fillBtn.addEventListener("click", function () {
context.clearRect(0, 0, 1000, 600);
context.beginPath();
context.fillRect(0, 0, 100, 100);
// 也可以这样拆分着写
context.rect(110, 0, 100, 100);
context.fill();
context.closePath();
});
// 画镂空的矩形
const strokeBtn = document.getElementById("stroke");
strokeBtn.addEventListener("click", function () {
context.clearRect(0, 0, 1000, 600);
context.beginPath();
context.strokeRect(10, 10, 100, 100);
// 也可以这样拆分着写
context.rect(120, 10, 100, 100);
context.stroke(); // 加入路径
context.closePath();
});
// 用线段绘制一个矩形
const lineBtn = document.getElementById("line");
lineBtn.addEventListener("click", function () {
context.clearRect(0, 0, 1000, 600);
context.beginPath();
context.moveTo(100, 100); // 将画笔移动至画布的（x,y）点处
context.lineTo(100, 200); // 绘制一条到(100,200)的线段
context.lineTo(200, 200); // 绘制一条到(200,200)的线段
context.lineTo(200, 100); // 绘制一条到(200,100)的线段
// context.fill() // 如果在未画完一个矩形时，使用颜色填充，会自动封闭
context.lineTo(100, 100); // 回到原点，形成一个封闭的矩形
context.stroke(); // 加入路径
context.closePath();
});
</script>
知识回顾
本章所用到的API
context.rect(110, 0, 100, 100);绘制一个矩形context.fill();填充context.fillStyle(color);填充色context.stroke();路径context.strokeStyle(color);路径色context.fillRect(x, y, width, height);绘制一个填充矩形context.strokeRect(x, y, width, height);绘制一个路径矩形context.moveTo(x, y, width, height);将画笔移动至画布的（x,y）点处context.lineTo(x, y);绘制一条到（x,y）点的线段context.beginPath(x, y, width, height);放下画笔（准备开始绘制）context.closePath(x, y, width, height);抬起画笔（结束绘制）context.clearRect(x, y, width, height);清除画布
结尾
编辑起来真不容易，想问问有什么办法提升一下写作速度吗，跪谢。
