html5canvas实现动态粒子背景

最新推荐文章于 2024-07-29 11:53:27 发布

CodeDoge

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量947

点赞数 3

文章标签： canvas javascript js

本文链接：https://blog.csdn.net/CodeDoge/article/details/108341835

版权

本文介绍了HTML5的Canvas元素，用于通过JavaScript绘制动态粒子背景。Canvas作为一个画布，本身不具备绘图功能，需要配合脚本进行操作。重点强调了不能通过CSS设置Canvas的宽高，而应使用html属性'width'和'height'，并提供了一段相关代码示例。

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

html5canvas实现动态粒子背景

什么是 canvas

canvas 是 HTML5 新定义的标签，通过使用脚本（通常是 JavaScript）绘制图形。标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。
默认情况下，没有边框和内容。默认是一个 300*150 的画布，所以我们创建了之后要对其设置宽高。
（圈重点）我们可以通过html属性‘width’，‘height’来设置canvas的宽高，不可以通过 css 属性来设置宽高。因为通过 css 属性设置的宽高会使 canvas 内的图像按照 300乘150 时的比例放大或缩小

话不多说，直接上代码

<!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>
<style>
    html {
        height: 100%
    }

    body {
        margin: 0;
        height: 100%;
        background: #fff;
    }

    canvas {
        display: block;
        width: 100%;
        h

最低0.47元/天解锁文章

CodeDoge

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
html5canvas实现动态粒子背景

html5canvas实现动态粒子背景什么是 canvascanvas 是 HTML5 新定义的标签，通过使用脚本（通常是 JavaScript）绘制图形。标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。默认情况下，没有边框和内容。默认是一个 300*150 的画布，所以我们创建了之后要对其设置宽高。（圈重点）我们可以通过html属性‘width’，‘height’来设置canvas
复制链接

扫一扫

专栏目录