历史搜索

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

游客2024-09-28 07:30:02
目录文章目录
  1. canvas 是什么?
  2. 前置知识
  3. 详细教程

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

canvas 是什么?

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

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

前置知识

canvas 标签本身

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

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

这里设置为 repeat,显示:

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

绘制的效果和之前一样。

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

合成

当我们在绘制 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>

效果如下:

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

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

重绘小恐龙

我封装了一下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 入门教程的所有内容,希望对大家有用,感谢阅读。