canvas

Posted 2021-02-04 zhanghua-zh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas相关的知识，希望对你有一定的参考价值。

canvas基本用法

1.什么是canvas(画布)

　　 <canvas> 是 html5 新增的元素，可用于通过使用javascript中的脚本来绘制图形，例如，它可以用于绘制图形，创建动画。可以使用 <canvas>标签来定义一个canvas元素，使用 <canvas>标签时，建议要成对出现，不要使用闭合的形式。

　　 <canvas>元素具有默认高宽 width: 300px; height: 150px

2.替换内容

　　对于某些不支持HTML元素 <canvas>的较老的浏览器（尤其是IE9之前的IE浏览器）只需要在标签中提供替换内容就可以。支持 <canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。不支持 <canvas>的浏览器会显示代替内容

3.canvas标签的两个属性

　　 <canvas>标签只有两个属性—— width和height。这些都是可选的。 <canvas>元素默认具有高宽（width： 300px； height：150px）。html属性设置width height时只影响画布本身不影画布内容。css属性设置width height时不但会影响画布本身的高宽，还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）。

4.渲染上下文

　　<canvas> 元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，我们需要找到它的渲染上下文。 getContext() 方法是用来获得渲染上下文和它的绘画功能。它只有一个参数，即上下文的格式。

5.canvas模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas模板</title>
    <style>
        canvas { border: 1px solid; }
    </style>
</head>
<body>
    <canvas id="test" width="300" height="300">
        <span>您的浏览器不支持画布元素，请升级或更换浏览器，推荐使用谷歌浏览器</span>
    </canvas>

    <script>

        function draw() {
            var canvasNode = document.querySelector(‘#test‘); // 获取画布

            if (!canvasNode.getContext)  return; // 检测支持性，防止在低版本浏览器报错

            var ctx = canvasNode.getContext("2d"); // 获取画笔

            // 绘制.....
        }

        draw();

    </script>
</body>

</html>

canvas绘制矩形

　　HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径

1.绘制矩形

绘制矩形的三种方法
- fillRect(x, y, width, height) --- 绘制一个填充的矩形（填充色默认为黑色）
- strokeRect(x, y, width, height) --- 绘制一个矩形的边框（默认边框为:一像素实心黑色）
- clearRect(x, y, width, height) --- 清除指定矩形区域，让清除部分完全透明。

　　x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。

　　width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）