canvas（1）

最新推荐文章于 2024-11-10 22:45:39 发布

Myeve0

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量422

点赞数 5

分类专栏： canvas 文章标签：前端

本文链接：https://blog.csdn.net/Wh1_te/article/details/137936882

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML和JavaScript中使用canvas元素进行基础绘图，包括创建canvas元素、设置大小、画线、渐变（线性、径向和锥形）以及控制线条宽度和样式。适合初学者了解canvas的基础用法。

摘要由CSDN通过智能技术生成

打个预警，canvas是零基础，不代表没有基本的前端基础（手动狗头）。本篇博客用来记录canvas学习过程，以便日后复盘2333

canvas的基本使用

使用步骤：

创建canvas元素，并使用宽度和高度属性设置canvas的大小
获取context（画笔）工具
使用canvasAPI进行绘图

使用html代码创建canvas元素

<body>
    <canvas width="600" height="400" class="canvas"></canvas>
    <script>
        const canvas = document.querySelector('.canvas')
        const context = canvas.getContext('2d')
        context.fillRect(100, 100, 200, 200)
    </script>
</body>

使用JavaScript代码创建canvas元素

<body>
    <script>
        const canvas = document.createElement('canvas')
        canvas.width = 600
        canvas.height = 400
        document.body.append(canvas)

        const context = canvas.getContext('2d')
        context.fillRect(100, 100, 150, 100)
    </script>
</body>

canvas大小宽度控制

不要使用样式控制canvas大小，canvas元素为了能正常显示里面的图形，需要使用属性来控制宽高。

canvas画线

canvas画直线

    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    document.body.append(canvas)

    const context = canvas.getContext('2d')
    context.moveTo(100, 100)
    context.lineTo(300, 100)
    context.stroke()

canvas画折线

代码：

    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    document.body.append(canvas)

    const context = canvas.getContext('2d')
    context.moveTo(100, 100)
    context.lineTo(200, 200)
    context.lineTo(300, 100)
    context.lineTo(400, 200)
    context.stroke()

效果：

lineWidth & strokeStyle

lineWidth（改变的是全局的线条宽度）

代码：

    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    document.body.append(canvas)

    const context = canvas.getContext('2d')
    context.moveTo(100, 100)
    context.lineTo(200, 200)
    context.lineWidth = 10
    context.stroke()
    context.lineTo(300, 150)
    context.stroke()

效果：

如果stroke()代码结束后有新的路径，也要stroke()才能有图像

strokeStyle

代码：

    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    document.body.append(canvas)

    const context = canvas.getContext('2d')
    context.strokeStyle = '#0c0'
    context.moveTo(100, 100)
    context.lineTo(200, 200)
    context.stroke()
    context.lineTo(300, 150)
    context.stroke()

效果：

渐变

线性渐变

代码：

    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    document.body.append(canvas)
    const ctx = canvas.getContext('2d')

    //创建
    const gradient = ctx.createLinearGradient(0, 0, 600, 400)
    //从什么颜色开始渐变
    gradient.addColorStop(0, 'red')
    //到什么颜色结束
    gradient.addColorStop(1, 'blue')

    ctx.moveTo(0, 0)
    ctx.lineTo(400, 400)
    ctx.lineWidth = 20
    ctx.strokeStyle = gradient
    ctx.stroke()

效果：

径向渐变

代码：

    const canvas = document.createElement('canvas')
    canvas.width = 200
    canvas.height = 200
    document.body.append(canvas)
    const ctx = canvas.getContext('2d')

    const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100)
    gradient.addColorStop(0, 'red')
    gradient.addColorStop(1, 'blue')
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, 200, 200)

效果：

锥形渐变

代码：

    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    const ctx = canvas.getContext('2d')
    document.body.append(canvas)

    const gradient = ctx.createConicGradient(45 * (Math.PI / 180), 100, 100);
    gradient.addColorStop(0, 'red')
    gradient.addColorStop(1, 'skyblue')
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, 200, 200)

效果：