H5画布 canvas（一）canvas简介、绘制圆形矩形、案例饼状图绘制

最新推荐文章于 2024-09-23 08:52:09 发布

m0_67401382

最新推荐文章于 2024-09-23 08:52:09 发布

阅读量477

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67401382/article/details/126101566

版权

本文介绍了HTML5 canvas的基本概念和使用，包括canvas标签、上下文Context、绘制矩形rect、绘制圆形arc，并通过实例展示了如何绘制饼状图，适合前端开发者学习。

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

1. canvas 简介

2. canvas 标签介绍

3. canvas 上下文 Context

4. 案例：在 canvas 画布中绘制表格

5. canvas 的 beginPath 状态

6. 绘制矩形 rect

7. 绘制圆形 arc

8. 案例：根据一组数据绘制饼状图

1. canvas 简介

canvas 是HTML5 提供的一种新标签，与 div 类似，是一个矩形的画布，它可以支持 JavaScript 在上面绘画，控制每一个像素；canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以使得页面更加丰富多彩。当前 canvas 广泛应用于游戏、可视化数据(echarts)、广告等领域。

2. canvas 标签介绍

canvas 其实就是一个普通的 HTML 标签，需要进行闭合，可以设置宽高、背景色属性，但宽高单位必须是 px，否则就会被忽略；一个 canvas 默认为 300*150 像素。

需要注意 canvas 元素的宽高必须使用它自带的属性进行设置，而不要用 CSS 选择器控制 canvas 的宽高，否则会造成图像拉伸，除宽高之外的其余属性则可用 CSS。如下简单案例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>canvas标签</title>
  <style>
    #can1 {
      background-color: cadetblue;
      border: 2px solid red;
    }
  </style>
</head>

<body>
  <!-- 设置宽高使用canvas标签的属性 -->
  <canvas id="can1" width="300px" height="150px"></canvas>
</body>

</html>

效果如下：