Canvas 是一个 HTML5 标准中定义的用于绘制图形的 API，通过 JavaScript 可以控制画布上的每一个像素点，实现图形、动画等效果。本文将介绍 Canvas 的基础知识、常用 API 和一些实际开发案例。
基础知识
创建 Canvas
使用 Canvas 需要先在网页中创建一个 <canvas> 元素，然后通过 JavaScript 获取其上下文（Context）对象来进行绘制操作。
<canvas id="myCanvas"></canvas>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');绘制基本图形
<canvas> 元素默认大小为 300x150 像素，可以通过设置其宽高属性改变大小。使用 Canvas 绘制图形需要先调用 beginPath() 方法开始绘制路径，然后调用一系列绘制方法，最后调用 stroke() 或 fill() 方法完成绘制。
-- -------------------- ---- ------- -- ---- ---------------- ------------- --- --------------- ----- ------------- -- ---- ---------------- ------------ --- ---- ----- ----------- -- ---- ---------------- ----------- --- --- -- ------- - --- -------------
设置样式和属性
Canvas 提供了多种 API 来设置绘制的样式和属性，包括线条宽度、颜色、阴影等。
-- -------------------- ---- ------- -- ------ ------------- - -- --------------- - ------ -- ------ ------------- - ------- -- ------ ----------------- - -- ----------------- - -- -------------- - --- --------------- - ------- -- ---- ---------------- -- ------------- ---------------
常用 API
绘制文本
Canvas 提供了 fillText() 和 strokeText() 方法来绘制文本，可以设置字体、大小、颜色等属性。
ctx.font = 'bold 24px Arial';
ctx.fillStyle = 'red';
ctx.fillText('Hello World!', 50, 50);绘制图片
Canvas 可以绘制图片，使用 drawImage() 方法可以将图片绘制到画布上，并可以进行缩放、旋转等操作。
const img = new Image();
img.src = 'image.png';
img.onload = function() {
ctx.drawImage(img, 0, 0, 100, 100);
};动画效果
通过不断更新 Canvas 上的图像，可以实现动画效果。可以使用 requestAnimationFrame() 方法来定时执行绘制操作，从而实现流畅的动画效果。
function draw() {
// 绘制图形或图片
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);实际开发案例
绘制时钟
-- -------------------- ---- -------
-------- ----------- -
----- --- - --- -------
----- ---- - ---------------
----- ------ - -----------------
----- ------ - -----------------
-- ----
----------------
------------ ---- ---- -- ------- - ---
-------------
-- ----
--- ---- - - -- - - --- ---- -
----- ----- - - - ------- - - - ------- - --
----- - - --- - --- - ----------------
----- - - --- - --- - ----------------
----------------
---------- -- -- -- ------- - ---
-----------
-
-- ----
----- --------- - ----- - -- - ------ - --- - ------- - - - ------- - --
----- ----- - --- - -- - --------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------