7.15、HTML5画布（简单图形和虚线）

sh2001824

于 2022-07-15 16:57:53 发布

阅读量691

点赞数

文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/sh2001824/article/details/125807073

版权

本文介绍了如何在HTML5中使用canvas标签配合JavaScript进行图形绘制，包括创建画布、定义画布路径、填充颜色和绘制虚线等步骤。通过示例展示了三角形的绘制，强调了fillStyle、fill()、closePath()和setLineDash()等关键函数的作用，并提供了不同方法绘制虚线的比较和应用。

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

1、在HTML5中画布的使用需要配合js使用，在HTML中画布的标签是canvas

  <canvas id="canvas" width="500" height="500"></canvas>
  <!-- 有一些比较老版的浏览器识别不了画布，所以我们一般加上 -->
    <canvas id="canvas" width="500" height="500">你的浏览器不支持画布</canvas>

2、js中使用画布需要7个步骤：

1.获取一个画布（要创建一个画布对象）
2.创建一个画布上下文对象
3.告诉程序绘画路径开始（可省略）
4.绘制图形的起始点（一般都是坐标）
5.绘制图形的连接点
6.设置图形的样式
7.描边（设置图形的边框）

如下是一个简单的三角形：

<!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>
</body>
<script type="text/javascript">
    //1.获取一个画布（要创建一个画布对