前端canvas的基础使用

news2024/10/7 2:25:36

一、介绍

前端中的 Canvas 是一种用于在网页上绘制图形的 HTML 元素。它提供了一个可以通过 JavaScript 进行绘制的 2D 绘图环境。使用 Canvas，您可以绘制图形，包括线条、矩形、圆形、文本和图像。Canvas 为开发人员提供了灵活自由的绘图能力，可以用于创建交互式游戏、数据可视化、图表和其他富媒体应用程序。

二、基础使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_初识canvas</title>
</head>
<style>
    #canvas {

        background-color: #c1c1c1;
        margin: 20px;
    }
</style>

<body>
    <canvas width="800" height="800" id="canvas"></canvas>
</body>
<script>
    //获取画板
    const canvas = document.querySelector('#canvas')
    //获取画笔
    const ctx = canvas.getContext("2d");
    //绘制线段
    ctx.beginPath(); //新建路径
    ctx.moveTo(0, 10);
    ctx.lineTo(200, 10);
    ctx.lineWidth = 10;
    ctx.strokeStyle = 'red'
    ctx.stroke()  //执行绘制
    //绘制线段
    ctx.beginPath(); //新建路径
    ctx.moveTo(0, 20);
    ctx.lineTo(200, 20);
    ctx.lineWidth = 10;
    ctx.strokeStyle = 'blue'
    ctx.stroke()  //执行绘制

    //绘制一个三角形
    ctx.beginPath(); //新建路径
    ctx.moveTo(0, 70);
    ctx.lineTo(200, 70);
    ctx.lineTo(90, 100)
    // ctx.lineTo(0, 70) //结束位置为开始位置，让图形闭合
    ctx.closePath(); //自动闭合api
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'blue'

    //设置填充颜色，并填充图形
    ctx.fillStyle = "green";
    ctx.fill()

    ctx.stroke()  //执行绘制

    //绘制矩形 rect() 需要配合 stroke() 一起使用
    ctx.beginPath();
    ctx.rect(0, 220, 200, 100);
    ctx.strokeStyle = 'red'
    //设置填充颜色，并填充图形
    ctx.fillStyle = "green";
    ctx.fill()
    ctx.stroke()

    //绘制矩形 strokeRect() 
    ctx.beginPath();
    ctx.strokeRect(0, 400, 200, 100);
    ctx.strokeStyle = 'red'

    //绘制并填充矩形 fillRect()
    ctx.beginPath();
    ctx.strokeStyle = 'red'
    ctx.fillRect(0, 600, 200, 100);
 

</script>

</html>