二、Canvas绘制钟表图形
代码案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.box{
text-align: center;
}
#canvas{
border: 1px solid #f00;
}
</style>
</head>
<body>
<div class="box">
<canvas id="canvas">
您的浏览器版本过低，请更换或者升级浏览器
<a href="http://www.baidu.com">谷歌下载地址</a>
</canvas>
</div>
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext("2d");
const PI = Math.PI;
setInterval(()=>{
ctx.clearRect(0,0,400,400);
var d = new Date();
var h = d.getHours();// 小时 3600秒动一下
var m = d.getMinutes();//分钟 60秒动一下
var s = d.getSeconds();//秒 一秒动一下
// 秒针处理
var sAngle = ( s*6 - 90 ) / 180 *PI ; //秒针对应的弧度
var mAngle = ( m*6 - 90 ) / 180 *PI ; //分针对应的弧度
var hAngle = ( h*30 - 90 + m/2) / 180 *PI ; //时针对应的弧度
// 1.绘制60个秒针分针刻度
for(var i=0;i<60;i++){
ctx.beginPath();
ctx.lineWidth=1;
ctx.moveTo(200,200);
ctx.arc(200,200,200,i*6/180*PI,(i+1)*6/180*PI,false);
ctx.closePath();
ctx.stroke()
}
// 3.绘制一个大一点的白色背景的圆
ctx.beginPath();
ctx.fillStyle="#fff";
ctx.arc(200,200,190,0,2*PI,false);
ctx.fill()
// 2.绘制12个时针刻度
for(var i=0;i<12;i++){
ctx.beginPath();
ctx.lineWidth=2;
ctx.moveTo(200,200);
ctx.arc(200,200,200,i*30/180*PI,(i+1)*30/180*PI,false);
ctx.closePath();
ctx.stroke()
}
// 4.绘制一个小一点的白色背景的圆
ctx.beginPath();
ctx.fillStyle="#fff";
ctx.arc(200,200,180,0,2*PI,false);
ctx.fill()
// 5.绘制秒针
ctx.beginPath();
ctx.lineWidth=1;
ctx.moveTo(200,200);
// ctx.arc(200,200,185,-12/180*PI,-12/180*PI,false);
ctx.arc(200,200,185,sAngle,sAngle,false);
ctx.closePath();
ctx.stroke()
// 6.绘制分针
ctx.beginPath();
ctx.lineWidth=2;
ctx.moveTo(200,200);
// ctx.arc(200,200,175,126/180*PI,126/180*PI,false);
ctx.arc(200,200,175,mAngle,mAngle,false);
ctx.closePath();
ctx.stroke()
// 7.绘制时针
ctx.beginPath();
ctx.lineWidth=3;
ctx.moveTo(200,200);
// ctx.arc(200,200,160,48/180*PI,48/180*PI,false);
ctx.arc(200,200,160,hAngle,hAngle,false);
ctx.closePath();
ctx.stroke()
// 8.绘制中心小圆
ctx.beginPath();
ctx.lineWidth=2;
ctx.fillStyle="#fff";
ctx.arc(200,200,5,0,2*PI,false);
ctx.stroke()
ctx.fill()
// 9.绘制时间文本
var str= ['Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ', 'Ⅷ', 'Ⅸ', 'X', 'Ⅺ', 'Ⅻ', 'Ⅰ', 'Ⅱ'];
ctx.save();
ctx.translate(193,207);
ctx.beginPath();
ctx.font="20px 楷体";
ctx.fillStyle = "black"
for(var i=0;i<12;i++){
var tx = 160*Math.cos(i*30/180*PI); // tx = 160*Math.cos(i*30/180*PI)
var ty = 160*Math.sin(i*30/180*PI);
ctx.fillText(str[i],tx,ty);
}
ctx.restore();
// 绘制名字
ctx.save();
ctx.translate(200,200);
ctx.font="25px 黑体";
ctx.fillStyle="black";
ctx.textAlign="center"
ctx.fillText("江诗丹顿",0,-120);
ctx.restore();
},1000)
</script>
</body>
</html>
tips1-2
三、SVG
1svg概述
(1)SVG，Scalable Vector Graphics是一种基于XML(标签)的语言，用于定义基于矢量的图形。
(2)作为矢量图像，SVG图像永远不会丢失质量，无论它们如何缩小或调整大小。
(3)SVG图像支持交互和动画。
xml 标签结构
2容器引入
<body>
<!--
svg：
默认的大小： 宽度300px 高度150px
-->
<svg id="svg" width="400px" height="400px">
</svg>
</body>
3绘制基本图形
① rect矩形
x,y 绘制的坐标
width/hieght 矩形的宽高
fill 填充颜色
stroke 描边颜色
stroke-width 线宽 （canvas line-width）
rx ry 圆角的大小
② line直线
x1,y1 起始点 ，x2,y2 终点
③ polyline折线
points 集合
值的形式1："x1,y1 x2,y2 ..."
值的形式2："x1 y1,x2 y2,..."
④ circle圆形
cx,cy,r 圆心和半径
代码案例
图形
<body>
<!--
svg：
默认的大小： 宽度300px 高度150px
-->
<svg id="svg" width="400px" height="400px">
<!--
绘制矩形 :
x,y 绘制的坐标
width/hieght 矩形的宽高
fill 填充颜色
stroke 描边颜色
stroke-width 线宽 （canvas line-width）
rx ry 圆角的大小
-->
<!-- 属性的形式 -->
<rect class="rect" rx="5" ry="5" x="50" y="50" width="100px" height="100px" fill="#ff0" stroke="#654321" stroke-width="5px"></rect>
<!-- 样式的形式 -->
<rect class="rect" rx="5" ry="5" x="50" y="200" style="width: 100px;height: 100px;fill: brown;stroke: chartreuse;stroke-width: 5px;"></rect>
<!--
直线
line
x1,y1 起始点 ，x2,y2 终点
-->
<line x1="160" y1="50" x2="260" y2="50" style="stroke: #000;stroke-width: 2px;"></line>
<!--
折线
polyline
points
第一种： points ="x1,y1 x2,y2 x3,y3";
第二种： points="x1 y1, x2 y2,..."
-->
<!-- <polyline points="180,100 280,100 280,280" style="fill:#fff;stroke: #000;stroke-width: 5px;"></polyline> -->
<polyline points="180 100 , 280 100 , 280 280" style="fill:#fff;stroke: #000;stroke-width: 5px;"></polyline>
<!-- 圆形 circle cx cy r -->
<circle cx="200" cy="200" r="50" style="fill: burlywood;"></circle>
</svg>
<script>
var rects = document.getElementsByClassName("rect");
// console.log(rects)
rects[0].onclick = function(){
console.log('第一个矩形')
}
rects[1].onclick = function(){
console.log('第二个矩形')
}
</script>
</body>
4 线性渐变
linearGradient 线性渐变：
id 唯一标识
x1, y1 渐变起始的位置 百分比 或者 0-1 小数
x2，y2 渐变结束的位置
代码案例
<body>
<!--
linearGradient 线性渐变：
id 唯一标识
x1, y1 渐变起始的位置 百分比 或者 0-1 小数
x2，y2 渐变结束的位置
-->
<svg id="svg" width="400px" height="400px">
<defs>
<!-- 定义渐变颜色 -->
<!-- <linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="0%"> -->
<!-- <linearGradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%"> -->
<linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" style="stop-color: chocolate;"></stop>
<stop offset="0.3" style="stop-color: cadetblue;"></stop>
<stop offset="0.5" style="stop-color: chartreuse;"></stop>
<stop offset="0.7" style="stop-color: #123456"></stop>
<stop offset="1" style="stop-color: lightpink;"></stop>
</linearGradient>
</defs>
<rect x="50" y="50" style="fill:url(#lg);width: 200px;height: 200px;stroke: #000;stroke-width: 2px;"></rect>
</svg>
</body>
5放射性渐变
radialGradient 放射性渐变：
id 唯一标识
cx,cy 外圆圆心位置
r 外圆半径
fx,fy 内圆圆心
代码案例：
<svg id="svg2" width="400px" height="400px">
<defs>
<!-- 定义渐变颜色 -->
<radialGradient id="rg2" cx="30%" cy="30%" r="50%" fx="50%" fy="50%">
<stop offset="0" style="stop-color: chocolate;"></stop>
<stop offset="0.3" style="stop-color: cadetblue;"></stop>
<stop offset="0.5" style="stop-color: chartreuse;"></stop>
<stop offset="0.7" style="stop-color: #123456"></stop>
<stop offset="1" style="stop-color: lightpink;"></stop>
</radialGradient>
</defs>
<!-- <circle cx="200" cy="200" r="100" style="fill: aquamarine;"></circle> -->
<circle cx="200" cy="200" r="100" style="fill: url(#rg2);"></circle>
</svg>
tips3
四、D3.js （了解）
1概念(数据驱动文档)
D3js(Data-Driven Documents),是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。
官方网址：https://www.d3js.org.cn/
2安装引用
3Selections(选择集)
selectAll节点集合\select节点
代码案例：
<script>
// console.log(d3)
// select 获取单个
// selectAll 获取集合
// 1.select
// var p = d3.select('p');
// // console.log(p)
// p.text("小乔")
// 2.selectAll
var ps = d3.selectAll("p");
// console.log(ps)
ps.text("小乔")
</script>
4动态样式style/属性绑定attr
// 3.动态设置样式
// var p = d3.select("p");
// p.style("width","300px").style("height","300px").style("border","1px solid #f00");
d3.select("p")
.style("width","300px")
.style("height","300px")
.style("border","1px solid #f00")
// 4.动态设置属性
d3.select("p").attr("class","box");
5数据绑定data
datum 绑定单个数据\data 绑定复合数据类型
6enter和exit、append
数据绑定的时候可能出现 DOM 元素与数据元素个数不匹配的问题，那么 enter 和 exit 就是用来处理这个问题的。enter 操作用来添加新的 DOM 元素，exit 操作用来移除多余的 DOM 元素。
如果数据元素多于 DOM 个数时用 enter，如果数据元素少于 DOM元素，则用 exit。
操作场景：
（1）数据元素个数多于 DOM 元素个数
（2）数据元素与 DOM 元素个数一样
（3）数据元素个数少于 DOM 元素个数
代码示例1：数据元素多于DOM元素个数
使用 enter 和 append 操作来补齐 DOM 元素
<body>
<script>
// enter append 一起使用进行内部添加元素
var arr = ["妲己","王昭君","姜子牙"];
var ps = d3.selectAll("p")
.data(arr)
.enter()
.append("p")
.style("color","red")
.text((item)=>{
// console.log(item)
return item;
})
</script>
</body>
代码示例2：数据元素等于DOM元素个数
此时不需要加入新节点也不需要删除多余的节点
参考data数据
代码示例3：数据元素少于DOM元素个数
使用exit和remove操作移除多余的元素
// 元素的个数大于 数据的个数
var ps = d3.selectAll("p").data(arr).text((item)=>{
return item;
})
ps.exit().remove()
tips4
五、Echarts.js
1Echarts概述
ECharts，一个使用 JavaScript 实现的开源可视化库，由百度商业前端数据可视化团队研发的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官方网址：http://echarts.apache.org/zh/index.html
2主要目的
借助图形化的手段，清晰有效地传达与沟通信息，揭示数据中的道理和规律.
3优势
(1)开源软件,提供了非常炫酷的图形界面,尤其是地图，同时还提供了柱状图、折线图、气泡图等。
(2)使用简单,底层用的是javascript封装,可以在html中嵌入图表，直接显示。
(3)兼容性好,基于html5,有着良好的动画渲染效果。
4.Echarts绘制基础柱状图
绘制步骤
1.先去下载
npm install echarts
2.引入
<script src="./echarts.min.js"></script>
3.绘图容器
当前容器要有宽高
<div id="main" style="width: 600px;height: 400px;border: 1px solid #ccc;">
</div>
4.获取容器，进行echarts初始化
var main = document.querySelector("#main");
var myEcharts = echarts.init(main);
5.设置图表的配置项
var option = {}
6.设置
myEcharts.setOption(option)
代码案例
基本柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.下载 npm install echarts -->
<!-- 2.引入 -->
<script src="./echarts.min.js"></script>
</head>
<body>
<!-- 3.绘图容器 -->
<div id="main" style="width: 600px;height: 400px;border: 1px solid #ccc;">
</div>
<script>
// console.log(echarts)
// 4.获取容器，进行echarts初始化
var main = document.querySelector("#main");
var myEcharts = echarts.init(main);
var data = [{id:1,name:"web",value:30},{id:2,name:"ui",value:20},{id:3,name:"php",value:15},{id:4,name:"python",value:25}]
var xData = data.map((item)=>{
return item.name;
})
var yData = data.map((item)=>{
return item.value;
})
// 5.设置图表的配置项
// 核心
var option = {
title:{
text:"ujiuye"
},
// 设置X轴数据
xAxis:{
type:"category",//类目
data:xData
},
// 设置Y轴
yAxis:{
type:"value",
},
series:[
{
type:"bar",
data:yData
}
]
}
// 6.设置
myEcharts.setOption(option)
</script>
</body>
</html>
tips5
5.Echarts基础配置
① title标题组件，包含主标题和副标题
② xAxis 直角坐标系 grid 中的 x 轴
③ yAxis直角坐标系 grid 中的 y 轴
④ series 系列列表,每个系列通过 type 决定自己的图表类型
⑤ tooltip提示框组件
⑥ legend图例组件
⑧ 横向柱状图
⑨ color 调色盘
⑩ toolbox工具栏,可以导出图片
⑪ echarts事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.下载 npm install echarts -->
<!-- 2.引入 -->
<script src="./echarts.min.js"></script>
<!-- 引入主题 -->
<script src="./theme/my-theme1.js"></script>
</head>
<body>
<!-- 3.绘图容器 -->
<div id="main" style="width: 600px;height: 400px;border: 1px solid #ccc;">
</div>
<script>
// console.log(echarts)
// 4.获取容器，进行echarts初始化
var main = document.querySelector("#main");
// light dark
var myEcharts = echarts.init(main,"my-theme");
var data = [{id:1,name:"web",value:30},{id:2,name:"ui",value:20},{id:3,name:"php",value:15},{id:4,name:"python",value:25}]
var xData = data.map((item)=>{
return item.name;
})
var yData = data.map((item)=>{
return item.value;
})
// 5.设置图表的配置项
// 核心
var option = {
toolbox:{
feature:{
saveAsImage:{},
dataView:{},
restore:{},
dataZoom:{},
magicType: {
type: ['line', 'bar']
}
}
},
grid:{
top:150,
left:50,
// bottom:,
// right:,
},
// color:["red","yellow","pink"],
legend:{
// data:["班级个数","教师人数"],
data:[
{
name:"班级个数",
icon:"rect",
itemStyle:{
color:"red"
}
},
{
name:"教师人数",
icon:"roundRect"
}
]
// icon:"circle"
},
tooltip:{
// formatter:"{c}"
formatter:function(arg){
// console.log(arg)
return arg.name+arg.value;
}
},
// 标题
title:{
text:"ujiuye",// 主标题
textStyle:{
fontSize:"30px",
// color:"red"
},
link:"http://www.ujiuye.com",
// 副标题
subtext:"班级个数",
subtextStyle:{
// color:"blue"
},
sublink:"http://www.ujiuye.com",
// textAlign:"center"
// left:30,
// top:30
left:"left"
},
// 设置X轴数据
xAxis:{
type:"category",//类目 data 只在type 为category有效
// data:["web","ui","php","python"],
data:[
{
value:"web",
textStyle:{
color:"red",
fontSize:"30px"
}
},
{
value:"ui"
},{
value:"php"
},{
value:"python"
}
],
name:"学科",
},
// 设置Y轴
yAxis:{
type:"value",
name:"个数",
axisLine:{
show:true
},
axisTick:{
show:true
}
},
series:[
{
name:"班级个数",
type:"bar",
data:[30,20,15,25],
barWidth:"30px",
label:{
show:true,
position:"top"
},
emphasis:{
itemStyle:{
color:"yellow"
}
}
}
,
{
// 教师人数
name:"教师人数",
type:"line",
data:[34,22,26,10]
}
]
}
// 6.设置
myEcharts.setOption(option);
// 7.使用ON绑定事件 （取消时间off）
// myEcharts.on("click",function(arg){
// console.log(arg.name,arg.value)
// switch(arg.name){
// case "web":
// // 。。。。
// break;
// case "ui":
// // 。。。。
// break;
// }
// })
myEcharts.on("click",{seriesName:"班级个数"},function(arg){
console.log(arg.name,arg.value)
switch(arg.name){
case "web":
// 。。。。
break;
case "ui":
// 。。。。
break;
}
})
</script>
</body>
</html>
横向柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.下载 npm install echarts -->
<!-- 2.引入 -->
<script src="./echarts.min.js"></script>
</head>
<body>
<!-- 3.绘图容器 -->
<div id="main" style="width: 600px;height: 400px;border: 1px solid #ccc;">
</div>
<script>
// console.log(echarts)
// 4.获取容器，进行echarts初始化
var main = document.querySelector("#main");
var myEcharts = echarts.init(main);
var data = [{id:1,name:"web",value:30},{id:2,name:"ui",value:20},{id:3,name:"php",value:15},{id:4,name:"python",value:25}]
var xData = data.map((item)=>{
return item.name;
})
var yData = data.map((item)=>{
return item.value;
})
// 5.设置图表的配置项
// 核心
var option = {
title:{
text:"ujiuye"
},
// 设置X轴数据
xAxis:{
// type:"category",//类目
// data:xData
type:"value"
},
// 设置Y轴
yAxis:{
type:"category",//类目
data:xData
},
series:[
{
type:"bar",
data:yData
}
]
}
// 6.设置
myEcharts.setOption(option)
</script>
</body>
</html>
tips6
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
