前端基础青训营文章打卡：Day1

今天针对视频中讲到的HTML5 Canvas 进行了基础学习，记录一下今天所学内容，梳理所学到的知识点。

一.创建Canvas画布

今天所了解到的画布创建方式有两种：1.HTML内； 2.JS内

注意！！
创建canvas元素的大小不能通过CSS改变，canvas元素本质是一块默认350px*150px的图片，通过CSS改变大小会对其进行伸缩，不是改变canvas元素的大小

1.通过HTML创建Canvas

直接在HTML文件内创建Canva标签<canvas></canvas>
可以在行内设置canvas元素宽高<canvas width="" height=""></canvas>

2.通过JS创建Canvas

在JS文件中通过creatElement创建canva元素，再用append添加到页面中

const canvas = document.createElement('canvas')
document.body.append(canvas)
// canvas.width = 500 
// canvas.height = 500  设置宽高

在JS中设置宽高的时候要使用canvas.width = num和 canvas.height = num,不能使用canvas.style.width = num和canvas.style.height = num
后者本质上还是通过CSS设置canvas的样式

二.Canvas的基本使用

1.创建画笔

通过getContext关键字创建画笔，创建画笔之后我们可以进行一系列简单操作，下面用变量ctx接收创建的画笔元素 const ctx = canvas.getContext('2d')

2.画直线

直键字主要是moveTo和lineTo，其中moveTo是规定画笔起点，lineTo是画笔终点，最后使用stroke在起点和终点形成一条直线

const canvas = document.createElement('canvas')
        canvas.width = 500
        canvas.height = 500
        document.body.append(canvas)
        const ctx = canvas.getContext('2d')
        ctx.moveTo(500,50) //传入的值对应起点的x,y
        ctx.lineTo(100,150) //传入的值对应终点的x,y
        ctx.stroke()

下面是对应的效果
联想截图_20230726130639.png
也可以通过多段lineTo形成折线

const canvas = document.createElement('canvas')
        canvas.width = 500
        canvas.height = 500
        document.body.append(canvas)
        const ctx = canvas.getContext('2d')
        ctx.moveTo(500,50)
        ctx.lineTo(100,150) //第一个终点
        ctx.lineTo(400,150) //第二个终点
        ctx.stroke()

对应效果联想截图_20230726131133.png 最后使用closePath可以闭合折线，调用ctx.closePath()

3.改变样式

使用lineWidth改变线条宽度 ctx.lineWidth = 10

联想截图_20230726131634.png

需要注意的是lineWidth是全局变量，意味着只要改变之后线条一直为这种宽度，需要改变的时候要重新赋值
还有一个点是宽度改变是以画笔中点左右延伸，可能出现以下情况，
联想截图_20230726165501.png
是因为起点横坐标为0，宽度设置为50，以0左右各延伸25，所以左边延伸的25无法看到，导致粗细不一致

使用strokeStyle改变线条颜色ctx.strokeStyle = '#0dd'
渐变颜色
首先创建一个渐变颜色的变量，下面用Gadient来接收， const Gradient = ctx.createLinearGradient(0,0,500,500)，其中creatLinearGradient需要四个变量，前两个是渐变起点位置，后两个是渐变终点位置
其次需要添加渐变， Gradient.addColorStop(position,'color'),第一个参数position是渐变位置，大小在0~1之间，第二个参数是该位置的颜色。
最后将渐变颜色赋予画笔ctx.strokeStyle = Gradient

const canvas = document.createElement('canvas')
        canvas.width = 600
        canvas.height = 600
        document.body.append(canvas)
        const ctx = canvas.getContext('2d')
        const Gradient = ctx.createLinearGradient(0,0,500,500)
        Gradient.addColorStop(0,'yellow')
        Gradient.addColorStop(0.5,'pink')
        Gradient.addColorStop(1,'blue')
        ctx.moveTo(25,50)
        ctx.lineTo(25,500)
        ctx.lineTo(500,500)
        ctx.strokeStyle = Gradient
        ctx.closePath()
        ctx.lineWidth = 50
        ctx.stroke()

对应效果

联想截图_20230726170019.png

总结发言

今天主要初步入门canvas这一新标签，个人接触canvas之后确实感觉到它的功能强大，为网页制作提供更丰富多彩的形式，添加更加美观的样式。之后将会深入学习，并且不断更新本篇文章，小目标是通过canvas创建一个小游戏。

Day1:HTML5 Canvas 基础｜ 青训营