canvas和svg基本使用
一、了解canvas和svg
canvas是HTML5提供的一种新标签，用于图形的绘制，通过JS来操作画面的绘制，<canvas>标签只是图形容器，必须使用脚本来绘制图形。
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。SVG 文件可以直接插入网页，成为DOM的一部分，然后用 JavaScript 和 CSS 进行操作。
二、（canvas）准备
在使用canvas之前创建文件，输入简单的HTML代码
<!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>
* {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid black;
display: block;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
</html>
这里需要注意：canvas标签默认宽度与高度 300 * 150，在浏览器中审查元素会看到，而且是可以保存图片的，所以浏览器认为canvas标签是一张图片，我们在标签内部添加其他的文本内容也是无济于事的，添加子节点也是一样没有用的，需要我们使用JS代码去操作图形文字的绘制与展现，canvas的高度和宽度也必须通过自身自带的属性width|height设置。
三、绘制
1、线的绘制
在创建好基本代码的前提下，使用script书写JS代码
<script>
// 获取节点
let canvas = document.querySelector('canvas');
// 创建2d画笔
let ctx = canvas.getContext('2d');
// 绘制线段的起点的设置
ctx.moveTo(300, 200);
// 其他点的设置：可以有多个
ctx.lineTo(300, 300);
ctx.lineTo(350, 250);
//设置图形的填充的颜色
ctx.fillStyle = "blue";
ctx.fill();
//设置线段的颜色与宽度
ctx.strokeStyle = "red";
ctx.lineWidth = "10"
//可以设置起点连接终点
ctx.closePath();
// 绘制渲染线段
ctx.stroke();
</script>
打开浏览器查看就看以看到一个三角形了
2、矩形的绘制
修改script的代码如下
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
// 绘制矩形第一种方式
// 第一个参数是画布左侧的距离，第二个是顶部的距离，第三个是宽，第四个是高
// 这种方法无法替换颜色
ctx.strokeRect(50,50,200,100);
// 第二种方式绘制矩形，参数和上方一致
// 这种方法可以替换填充颜色
ctx.fillStyle = 'blue';
ctx.fill();
ctx.fillRect(300,50,200,100);
</script>
打开浏览器就可以看见两个矩形了
3、圆形的绘制
修改script的代码
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
// 绘制圆形
ctx.beginPath();
// 参数
// 第一个参数和第二个参数是圆形的坐标，第三个参数是圆的半径
// 第四个是起始的弧度，弧度不是角度，注意转换
// 第五个是结束的弧度，最后一个参数是是否逆时针绘制，true为顺时针
ctx.arc(300,200,100,0,2 * Math.PI,true);
// 设置填充颜色
ctx.fillStyle = 'red';
ctx.fill();
// 绘制圆形
ctx.stroke();
// 绘制
ctx.beginPath();
ctx.stroke();
</script>
打开浏览器就可以看见圆形了
4、清除画布和绘制文字
清除画布也可以理解为裁剪一块区域，修改script的代码
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
// 绘制一个矩形
ctx.fillRect(200, 100, 200, 100);
// 清除画布
//ctx.clearRect(0,0,600,400);
// 清除部分画布
ctx.clearRect(200, 100, 50, 50);
// 设置文字大小
ctx.font = "20px 微软雅黑";
ctx.fillStyle = 'blue';
//绘制文字 参数为起始点的坐标
ctx.fillText("文字区域", 100, 100);
</script>
这样就可以看见矩形的一个角被清除了，文字也展现出来了
5、制造一个简单的柱状图
示例代码如下
<!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>
* {
margin: 0;
padding: 0;
}
canvas {
/* border: 3px solid black; */
margin: 50px auto;
display: block;
}
</style>
</head>
<body>
<canvas width="800" height="430"></canvas>
</body>
</html>
<script>
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
// 绘制文本
ctx.font = '18px 微软雅黑'
ctx.fillText('数据可视化', 50, 50)
// 绘制线段
ctx.moveTo(100, 100)
ctx.lineTo(100, 400)
ctx.lineTo(700, 400)
ctx.stroke()
// 绘制其他的线
ctx.moveTo(100, 100)
ctx.lineTo(700, 100)
// 底部文字
ctx.fillText('150', 60, 105)
ctx.moveTo(100, 160)
ctx.lineTo(700, 160)
// 底部文字
ctx.fillText('120', 60, 165)
ctx.moveTo(100, 220)
ctx.lineTo(700, 220)
// 底部文字
ctx.fillText('90', 65, 225)
ctx.moveTo(100, 280)
ctx.lineTo(700, 280)
// 底部文字
ctx.fillText('60', 65, 285)
ctx.moveTo(100, 340)
ctx.lineTo(700, 340)
// 底部文字
ctx.fillText('30', 65, 345)
ctx.fillText('0', 70, 408)
ctx.stroke()
// 绘制水平轴底部的线段
ctx.moveTo(250, 400)
ctx.lineTo(250, 410)
// 底部文字
ctx.fillText('食品', 165, 420)
ctx.moveTo(400, 400)
ctx.lineTo(400, 410)
// 底部文字
ctx.fillText('数码', 315, 420)
ctx.moveTo(550, 400)
ctx.lineTo(550, 410)
// 底部文字
ctx.fillText('服饰', 460, 420)
ctx.fillText('箱包', 620, 420)
ctx.stroke()
// 绘制矩形
ctx.fillStyle = 'red'
ctx.fillRect(130, 250, 100, 150)
ctx.fillRect(280, 200, 100, 200)
ctx.fillRect(430, 120, 100, 280)
ctx.fillRect(580, 220, 100, 180)
</script>
四、svg
svg的学习代码如下
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 800px;
border: 1px solid pink;
margin: 100px auto;
display: block;
}
</style>
</head>
<body>
<!-- svg双闭合标签:默认宽度与高度300 * 150 svg绘制图形务必在svg标签内部使用绘制图形 -->
<svg class="box">
<!-- x1,y1是第一个点的坐标,x2,y2是第二个点的坐标 stroke-width="20"改变线的宽度-->
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
<line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
<!-- 绘制折线 fill-opacity="0.5" 设置填充颜色的透明度 stroke="red"设置描边-->
<polyline points="300 300, 50 100, 120 400" fill-opacity="0.5" stroke="red"></polyline>
<!-- 绘制矩形 fill="pink"改变填充的颜色-->
<rect x="400" y="400" width="150" height="50" fill="pink"></rect>
<!-- 绘制圆形 -->
<!-- stroke:pink 描边颜色 fill:red 填充颜色-->
<circle cx="370" cy="95" r="50" style="stroke:pink;fill:red"></circle>
<!-- 绘制圆形或椭圆 -->
<!-- cx="500" cy="500" 圆心的位置 rx="100" ry="50" 水平半半径和垂直半径 -->
<ellipse cx="500" cy="500" rx="100" ry="50" style="fill:red"></ellipse>
<!-- 多边形 -->
<polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0"></polygon>
<!-- 绘制任意形状 -->
<path d="
M 10 10
L 20 400
L 30 120
L 40 66
L 50 99
L 60 120
L 70 200
Z
" stroke="red" fill-opacity="0"></path>
</svg>
</body>
</html>
五、拓展Echarts
准备初始容器
<!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>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid pink;
}
</style>
</head>
<body>
<!-- 准备容器 -->
<div></div>
</body>
</html>
这里我们需要链接引入Js文件，我们必须准备一个具有宽高的容器div
书写简单的script代码
<script>
// 基于准备好的DOM初始化Echarts的实例
let dom = document.querySelector('div')
// 创建Echarts的实例
let myEcharts = echarts.init(dom)
// 指定图表的配置项与数据
myEcharts.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
})
</script>
等待加载就可以看到根据已有的数据展现可视化的柱状图了，加载不出来可以下载Echarts的js文件进行引入即可，Echarts的官网地址：<Apache ECharts>，在顶部的实例位置可以查看一些例子，使用只要找到我们所需要的样式，修改配置和数据使用即可，配置文件：<Documentation - Apache ECharts>
如果需要展示好几个只要对每一个容器div配置相应的配置项即可
<body>
<!-- 准备容器 -->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<script>
// 基于准备好的DOM初始化Echarts的实例
let dom1 = document.querySelector('.box1')
let dom2 = document.querySelector('.box2')
// 创建Echarts的实例
let myEcharts = echarts.init(dom1)
let myEcharts2 = echarts.init(dom2)
// 指定图表的配置项与数据
myEcharts.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
})
myEcharts2.setOption({
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
</script>
如果说一个div需要展示很多的图像，只需要在series选项增加配置对象即可
<body>
<!-- 准备容器 -->
<div class="box1"></div>
</body>
</html>
<script>
// 基于准备好的DOM初始化Echarts的实例
let dom1 = document.querySelector('.box1')
// 创建Echarts的实例
let myEcharts = echarts.init(dom1)
// 指定图表的配置项与数据
myEcharts.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
name: 'Access From',
type: 'line',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
width: 300,
height: 300,
left: 10,
top: 10
}
]
})
</script>
字符集的使用，将数据提取出来，使用字符集来展示数据
<body>
<!-- 准备容器 -->
<div class="box1"></div>
</body>
<script>
let dom1 = document.querySelector('.box1')
let myEcharts = echarts.init(dom1)
// 指定图表的配置项与数据
let data = [
['衣服', 120, 24, 'x', 30],
['游戏', 200, 26, 'y', 30],
['直播', 150, 21, 'z', 30],
['电影', 80, 233, 'p', 30]
]
myEcharts.setOption({
// 设置字符集
dataset: {
source: data
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
data: [120, 200, 150, 80],
},
{
name: 'Access From',
type: 'line',
radius: '50%',
encode: {
y: 3
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
type: 'pie',
radius: '50%',
width: 300,
height: 300,
left: 10,
top: 10,
encode: {
itemName: 3,
value: 4
}
}
]
})
</script>
了解双标坐系，在一个柱状图内部嵌入折线
<body>
<!-- 准备容器 -->
<div class="box1"></div>
</body>
<script>
let dom1 = document.querySelector('.box1')
let myEcharts = echarts.init(dom1)
// 指定图表的配置项与数据
// 双坐标轴
myEcharts.setOption({
title: {
text: '双坐标系'
},
xAxis: {
type: 'category',
data: ['第一', '第二', '第三', '第四']
},
yAxis: [
{
axisLine: {
show: true
},
axisTick: {
show: true
}
},
{
axisLine: {
show: true
},
axisTick: {
show: true
}
}
],
series: [
{
// 折线图
type: 'line',
data: [10, 20, 30, 50],
yAxisIndex: 0
},
// 柱状图
{
type: 'bar',
data: [6, 15, 30, 20],
yAxisIndex: 1
}
]
})
</script>
对于Echarts的图形数据化主要在于使用配置手册来修改成我们需要的样子，将数据代入即可。
