HTML5画布(canvas)绘制图形_html canvas 绘图

作者：2023面试高手 | 2024-02-18 10:51:46

踩

html canvas 绘图

<canvas>标签

canvas 元素用于在网页上绘制图形

canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。

默认情况下它在网页上是一块空白区域，默认大小300*150

注意：canvas画布默认背景色为透明色，可以自行定义背景色

使用html5的<canvas>标签在网页中创建一个画布，语法格式如下：


<canvas id="canvas" width="500" height="500">
     您的浏览器版本太低，不支持画布，请更新浏览器
</canvas>

1.1 绘制线条

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

步骤：

获取一个画布(要创建一个画布对象)
创建一个画布上下文对象
绘制图形的起始点(坐标)
绘制图形的连接点
闭合路径
设置图形的样式
描边

例图：

示例代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500">
        您的浏览器版本太低，不支持画布，请更新浏览器
    </canvas>
    <script type="text/javascript">
        // 1.获取一个画布(要创建一个画布对象)
        var canvas = document.getElementById("canvas");
        // 2.创建一个画布上下文对象
        var context = canvas.getContext("2d");
        // 3.告诉程序绘画路径开始
        context.beginPath();
        // 4.绘制图形的起始点(坐标)
        context.moveTo(0,0);
        // 5.绘制图形的连接点
        context.lineTo(100,100);
        context.closePath();// 闭合路径
        // 6.设置图形的样式
        context.strokeStyle="red";
        // 7.描边
        context.stroke();
        context.fillStyle="red";// 设置要给图形填充的颜色
        context.fill();// 填充
    </sc

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/107410