01-canvas的基本使用01

原创已于 2024-12-20 16:14:37 修改 · 315 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Canvas

当前文章被收录于：

Canvas

38 篇文章 0 人学习

B站的canvas课程笔记。本课程多角度地给大家讲解了 Canvas 要如何入门，如何进行更加高级的使用。

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2024-12-20 15:48:18 首次发布

一次性学会 Canvas 动画绘图 | 01-canvas的基本使用01https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.videopod.episodes&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 使用 canvas 的基本步骤：
    1. 需要一个 canvas 标签
    2. 需要获取 画笔 对象
    3. 使用 canvas 提供的 api 进行绘画 -->

    <!-- 使用 body 里面的标签的方式 创建一个 canvas 对象 -->
    <!-- canvas 需要使用属性的方式设置宽和高 -->
    <canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
    // 1. 获取canvas（画布）标签
    const canvas = document.getElementById('canvas');
    // 2. 获取context（画笔）对象
    const context = canvas.getContext('2d');
    // 3. 画出自己想要的图形
    // 画一个方形，有专门的api, fillRect(x,y,width,height)
    context.fillRect(100,100,200,200);
</script>

</html>

标签

#javascript #前端