最详细的canvas入门教程，一次全学会

1. canvas 是什么？
2. 前置知识
• canvas 标签本身
• canvas 浏览器支持情况
3. 详细教程
• 基本步骤
• 坐标系
• 一、绘制基础图形
• 1. 画线段
• 给线段设置样式
• 同时画多条线并分别设置样式
• 2. 画三角形
• 3. 画矩形
• 4. 画⌒/⚪
• 5. 画椭圆
• 6. 画贝塞尔曲线
• 7. 画虚线
• 二、绘制文本
• Hello Canvas!
• 设置文本样式
• 获取文本宽度
• 样式补充
• 渐变色
• 添加指定元素
• 阴影样式
• 三、绘制图片
• 合成、保存和还原绘画状态、变形、裁剪
• 合成
• 保存和还原绘画状态
• 变形
• 裁剪
• 清除
• canvas 绘制动画
• 绘制原理
• 常用的绘制方法
• 奔跑的小恐龙
• 绘制钟表
• 重绘小恐龙

今天为大家分享的是本人整理很久的canvas 详细入门教程，如果大家按照文章的案例一个一个手动敲下来，保证你可以学会绘制很多图案和动画，对于入门 canvas 会有很大帮助。文章内容比较多，建议先马后看，也方便后面复习回看。

canvas 是什么？

简单来说，<canvas> 是 HTML5 中的标签，它是一个容器，可以使用 JS 在其中绘制图形或文字。

MDN：<canvas>是一个可以使用脚本 (通常为 JavaScript) 来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于 2D 图形。

前置知识

canvas 标签本身

canvas 标签是一张画布，如果你写了一个 canvas 标签，在支持 canvas 的浏览器上显示是这样的：

这里设置为 repeat，显示：

绘制的效果和之前一样。

合成、保存和还原绘画状态、变形、裁剪

合成

当我们在绘制 canvas 画布的时候，不可避免地要考虑到绘制的顺序，如果我们希望一个图形一直置顶显示，那么就可以使用globalCompositeOperation = type这个方法，根据type的值，这个方法有以下几种作用：

source-over

默认值，在已有图像之上绘制新图像。

<canvas id="canvas" height="600" width="700"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.arc(350, 200, 200, 0, [(Math.PI) / 180] * 360)
    ctx.fillStyle = 'skyblue'
    ctx.globalCompositeOperation = 'source-over'
    ctx.fill()
    ctx.beginPath()
    ctx.arc(200, 400, 200, 0, [(Math.PI) / 180] * 360)
    ctx.fillStyle = '#fffc96'
    ctx.globalCompositeOperation = 'source-over'
    ctx.fill()
    ctx.beginPath()
    ctx.arc(500, 400, 200, 0, [(Math.PI) / 180] * 360)
    ctx.fillStyle = 'pink'
    ctx.globalCompositeOperation = 'source-over'
    ctx.fill()
</script>

效果如下：

为了便于大家观看，具体步骤我写在了代码块的注释中

重绘小恐龙

我封装了一下requestAnimationFrame()方法，这样我们既可以用到requestAnimationFrame方法的优点，又可以自由控制每次调用绘制函数的时间间隔：

封装：

// 重新封装 requestAnimationFrame 函数：
function mySetInterval(func, detay) {
    var i = 0
    myReq = requestAnimationFrame(function fn() {
        // 判断现在处于 60 帧的第几帧，如果是目标帧的话，调用 func 函数：
        if (i % parseInt(60 / (1000 / detay)) == 0) {
            func();
        }
        i++
        // 让 i 值每秒增加 60，循环调用 func 函数：
        requestAnimationFrame(fn)
    })
}

// 调用封装好的函数，一秒钟打印一次'111'：
mySetInterval(function () {
    console.log(111);
}, 1000)

这样我们就可以调用封装的mySetInterval方法来代替setInterval方法了：

<canvas id="canvas" height="600" width="700"></canvas>
<script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    // 存储图片的链接：
    const imgSrcs = ['https://media.mybj123.com/wp-content/uploads/2023/03/1679643336-d1537bf206ece11.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643413-1bee6a9ad93762b.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643416-cb43fa2239ecf87.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643419-c35f4e51eebc636.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643422-e1a653fec407f7b.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643425-f3cb6e4ca72f0e3.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643427-b2c64c43fad9528.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643430-70978811f735fff.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643433-1d766b17e0bcae3.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643435-68181efc6760ff7.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643438-7a9b62cc438870c.png', 'https://media.mybj123.com/wp-content/uploads/2023/03/1679643441-cd833b4fb8b874d.png']
    const img = new Image()
    var i = 0

    // 重新封装 requestAnimationFrame 函数：
    function mySetInterval(func, detay) {
        var i = 0
        myReq = requestAnimationFrame(function fn() {
            // 判断现在处于 60 帧的第几帧，如果是目标帧的话，调用 func 函数：
            if (i % parseInt(60 / (1000 / detay)) == 0) {
                func();
            }
            i++
            // 让 i 值每秒增加 60，循环调用 func 函数：
            requestAnimationFrame(fn)
        })
    }

    // 不断绘制新的图片：
    mySetInterval(() => {
        img.src = imgSrcs[i]
        img.onload = () => {
            ctx.drawImage(img, 60, 120)
        }
        i++
        if (i === 12) {
            i = 0
        }
    }, 70)
</script>

以上就是关于 canvas 入门教程的所有内容，希望对大家有用，感谢阅读。