canvas是什么？

简单来说，<canvas> 是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。

目录

MDN：<canvas>是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。

预备知识

canvas标签是一张画布，如果你写了一个canvas标签，打开live server，在支持canvas的浏览器上显示是一片白。

你可能会问怎么啥都没有呢？因为canvas标签只是一个默认长300像素，宽150像素的白色画布，你可以给它加上页面居中和box-shadow的css样式：

html,
body{
    overflow: hidden;
}
canvas{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin: calc((100vh - 600px) / 2) calc((100vw - 1000px) / 2);
}

设置后：

<canvas>的画布就长这个样子~

上边的这种方式只是将画布拉伸变形了，就好像拿放大镜看一样，会导致失真，其实它本质上的大小并没有变化，比如：

所以canvas的宽高还是要在html中使用标签属性设置。

所以，标签还得这么写：

<canvas width="1000" height="600"></canvas>

整体代码就是如下：

<!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 width="1000" height="600"></canvas>
</body>
<style>
    html,
    body{
        overflow: hidden;
    }
    canvas{
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        margin: calc((100vh - 600px) / 2) calc((100vw - 1000px) / 2);
    }
</style>
</html>

支持的浏览器

IE已经有自己的墓碑了。。

那么如果你的浏览器不支持canvas呢？那么你canvas标签中的文字就派上用场了，浏览器上会显示出你canvas标签里的文字，比如：

<canvas>你的浏览器不支持canvas，快去升级浏览器吧！</canvas>

这就真的真的非常非常的尴尬哈~~~哈哈哈哈，嗝

© 版权声明
分享是一种美德，转载请保留原链接