绘制矩形边框，和填充不同的是绘制使用的是strokeRect， 和strokeStyle实现的
绘制路径
绘制路径的作用是为了设置一个不规则的多边形状态
路径都是闭合的，使用路径进行绘制的时候需要既定的步骤：
-
需要设置路径的起点
-
使用绘制命令画出路径
-
封闭路径
-
填充或者绘制已经封闭路径的形状
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn" style="width: 50px;height: 50px;background-color: red;" >
清屏
</button>
<canvas id="context" width="500" height="600">当前的浏览器版本不支持，请升级浏览器</canvas>
<script >
const dom = document.querySelector("#context");
// console.log(dom.getContext);
if(!dom.getContext) {
alert("当前浏览器不支持")
}
var btn = document.querySelector("#btn");
const ctx = dom.getContext("2d"); // 获取2D上下文
if(ctx != null) {
// 创建一个路径
ctx.beginPath()
ctx.moveTo(100,100); // 需要设置路径的起点
ctx.lineTo(200,200);
ctx.lineTo(400,200);
ctx.lineTo(400,100); // 使用绘制命令画出路径
ctx.closePath(); // 封闭路径
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.fillStyle = "blue";
ctx.fill(); // 填充或者绘制已经封闭路径的形状
}
btn.onclick = () => {
ctx.clearRect(0,0,600,600);
}
</script>
</body>
</html>
总结我们要绘制一个图形，要按照顺序
- 开始路径
ctx.beginPath() - 移动绘制点
ctx.moveTo(x, y) - 描述绘制路径
ctx.lineTo(x, y) - 多次描述绘制路径
ctx.lineTo(x, y) - 闭合路径
ctx.closePath() - 描边
ctx.stroke() - 填充
ctx.fill()
此时我们发现之前我们在学习绘制矩形的时候使用的是fillRect和strokeRect，但是实际上fill和stroke也是具有绘制填充功能的
stroke(): 通过线条来绘制图形轮廓。
fill(): 通过填充路径的内容区域生成实心的图形。
渲染图片
// 导入图片
if(ctx !== null) {
// 第一步是创建一个image元素
let image:HTMLImageElement = new Image()
// 用src设置图片的地址
image.src = "image/test1.png"
// 必须要在onload函数内绘制图片，否则不会渲染
image.onload = function() {
ctx.drawImage(image, 100, 100)
}
}
canvas是可以进行变形的，但是变形的不是元素，而是ctx，ctx就是整个画布的渲染区域，整个画布在变形，我们需要在画布变形前进行保存和恢复：
save()：保存画布（canvas）的所有状态。restore()：save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。