学习canvas

Canvas是一个基于像素的渲染引擎，它使用JavaScript API在画布上绘制图像。以下是它的一些优点和缺点：

优点：
Canvas的渲染速度快，适合处理大量图像和高度动态的图像。
可以直接操作像素，从而能够创建出高质量、流畅的动画。
由于Canvas提供了极高的灵活性，只要代码编写得当，就可以渲染出任何想要的画面。
Canvas能够以.png或者.jpg格式保存结果图像，最适合图像密集型的游戏。
缺点：
Canvas依赖于分辨率，因此在不同设备上的表现可能存在差异。
Canvas不支持事件处理，这可能在某些需要用户交互的场景下造成限制。
Canvas的文本渲染能力相对较弱，可能无法满足一些复杂的文本展示需求。

getContext

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

arc

// 起始位置 ～ 终止位置 连线，在下方位置填充
ctx.beginPath();
ctx.arc(100/* 圆心x */, 100/* 圆心y */, 50/* 半径 */ , Math.PI * 0.2/* 起始位置 */, Math.PI * 0.7 /* 终止位置 */ );
ctx.fillStyle = 'pink';// 颜色
ctx.fill();// 填充
ctx.closePath();

moveTo 和 lineTo

ctx.beginPath();
ctx.moveTo(90, 190); // 移动到这个位置
ctx.lineTo(190, 120); // 划线到 指定位置
ctx.strokeStyle = 'red';
ctx.stroke();// stroke()方法对路径进行描边
ctx.closePath();

font ，fillStyle，fillText

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('111', 50, 50)

strokeText 很模糊

ctx.strokeText('Hello World', 50, 50); // 在坐标(50,50)处绘制文本'Hello World'的轮廓

strokeRect

左上角的位置，为开始位置

ctx.strokeStyle = 'red';
ctx.strokeRect(50, 50, 100/*宽*/, 100/*高*/); // 在坐标(50,50)处绘制一个宽为100、高为100的空心矩形边框