数据可视化之canvas（简单了解）

予倾

已于 2022-04-08 10:12:51 修改

阅读量1.2k

点赞数 1

分类专栏：配置文章标签： html5 前端 javascript

于 2022-01-03 17:09:06 首次发布

本文链接：https://blog.csdn.net/QZ9420/article/details/122283994

版权

配置专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在这里插入图片描述

使用canvas绘制一个三角形

<!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>
    <style>
        canvas{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!-- canvas画布：是HTML5中新增的一个特性，双闭合标签 -->
    <!-- canvas标签默认的宽度与高度 300 * 150 -->
    <!-- 浏览器认为canvas是一张图片 -->
    <!-- 给canvas标签内添加文本内容与子节点没有任何意义 -->
    <!-- 如果你想操作canvas画布，必须通过js来完成 -->
    <!-- canvas的宽高必须通过canvas标签属性的width|height来设置（不能使用css样式来设置），不然会出bug -->
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    let canvas = document.querySelector('canvas')
    // 获取画布笔的【上下文】
    let ctx = canvas.getContext('2d')
    // 绘制线段：绘制线段起点的位置
    ctx.moveTo(100, 100)
    // 其他点的设置--可以有多个
    ctx.lineTo(100, 200)
    ctx.lineTo(200, 100)
    // 填充颜色
    ctx.fillStyle = 'red'
    ctx.fill()
    // 设置线段的颜色
    ctx.strokeStyle = 'skyBlue'
    ctx.lineWidth = '20'
    // 可以设置起点与终点连接在一起
    ctx.closePath()
    // stroke方法绘制线段
    ctx.stroke()
</script>

效果图：
在这里插入图片描述

简单绘制矩形与文字

<!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>
    <style>
        canvas{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    let canvas = document.querySelector('canvas')
    // 获取画布笔的【上下文】
    let ctx = canvas.getContext('2d')
    // 绘制矩形 -- 无法填充背景色
    ctx.fillRect(100, 200, 100, 200)
    // 第二种方式绘制矩形 -- 填充颜色可以替换 -- 在绘制图形之前填充颜色
    ctx.fillStyle = 'skyBlue'
    ctx.fill()
    ctx.fillRect(300, 200, 100, 200)
    // 清除画布--整张
    // ctx.clearRect(0, 0, 600, 400)
    // 清除部分画布
    // ctx.clearRect(100, 200, 50, 100)
    // 设置文字大小
    ctx.font = '20px 微软雅黑'
    ctx.fillStyle = 'red'
    // 绘制文字
    ctx.fillText('数据可视化', 50, 20)
</script>

效果图：
在这里插入图片描述

绘制圆形

<!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>
    <style>
        canvas{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    let canvas = document.querySelector('canvas')
    // 获取画布笔的【上下文】
    let ctx = canvas.getContext('2d')
    // 绘制圆形
    ctx.beginPath()
    // 绘制圆形的方法：x、y、半径、起始弧度、结束弧度、是否逆时针绘制
    ctx.arc(100, 100, 50, 0, 2 * Math.PI, true)
    // 设置填充颜色
    ctx.fillStyle = 'red'
    ctx.fill()
    // 绘制圆形
    ctx.stroke()
</script>

效果图：
在这里插入图片描述
canvas.toDataURL(“image/png”);
格式 image/[图片格式]
png默认生成图片无背景；
jpeg默认生成图片为黑色背景；
如果需要白色背景，可以：

ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);

予倾

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
数据可视化之canvas（简单了解）

使用canvas绘制一个三角形<!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"> .
复制链接

扫一扫

专栏目录