数据可视化
canvas
“画布”,像素的位图
- 编写canvas标签 添加默认宽高
<canvas id="canvas" width="800" height="800"></canvas>
- 获取到canvas对象
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
- 设置获取绘图属性
- 调用API
实现
<canvas id="canvas" width="800" height="800"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 矩形
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 50, 50);
// 线段
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "blue";
ctx.moveTo(100, 100);
ctx.lineTo(250, 75);
ctx.lineTo(300, 100);
ctx.stroke();
//绘制圆形
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
ctx.fillStyle = "red";
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
</script>
图片压缩
<input type="file" id="upload" />
<script>
const ACCEPT = ["image/gif", "image/jpeg"];
const MAXSIZE = 1024 * 1024 * 1024;
const upload = document.getElementById("upload");
// 转base64
function converImageToBase64(file, callback) {
let reader = new FileReader();
reader.addEventListener("load", function(e) {
// console.log(reader.result);
const base64Image = e.target.result;
callback && callback(base64Image);
reader = null; //内存回收
});
reader.readAsDataURL(file);
}
// 压缩
function compress(base64Image, callback) {
let maxW = 1024;
let maxH = 1024;
// 获取base64
// console.log(base64Image);
// 创建标签
const image = new Image();
image.src = base64Image;
// 图片宽高进行压缩
image.addEventListener("load", function(e) {
let ratio;
let needCompress = false;
if (maxW < image.naturalWidth) {
needCompress = true;
ratio = image.naturalWidth / maxW;
maxH = image.naturalHeight / ratio;
} else if (maxH < image.naturalHeight) {
needCompress = true;
ratio = image.naturalHeight / maxH;
maxW = image.naturalHeight / ratio;
}
if (!needCompress) {
maxW = image.naturalWidth;
maxH = image.naturalHeight;
}
document.body.appendChild(image);
// canvas 压缩 压缩尺寸/分辨率
const canvas = document.createElement("canvas");
canvas.setAttribute("id", "_compress_");
canvas.width = maxW;
canvas.height = maxH;
// canvas.style.visibility = "visible";
canvas.style.visibility = "hidden";
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, maxW, maxH);
// 压缩大小
ctx.drawImage(image, 0, 0, maxW, maxH);
// 压缩分辨率
const compressImage = canvas.toDataURL("image/jpeg", 0.9);
// console.log(compressImage);
// 创建image显示
callback && callback(compressImage);
canvas.remove();
image.remove();
});
// 输出base64
}
function uploadToServer(compressImage) {
console.log("发送给后端", compressImage);
}
upload.addEventListener("change", function(e) {
const [file] = e.target.files;
if (!file) {
upload.value = "";
return;
}
const {
type: fileType,
size: fileSize
} = file;
// 判断包含
// console.log(fileType);
if (!ACCEPT.includes(fileType)) {
alert("不支持");
upload.value = "";
return;
}
if (fileSize > MAXSIZE) {
alert("文件超出1mb");
upload.value = "";
return;
}
// 压缩文件
converImageToBase64(file, (base64Image) =>
compress(base64Image, uploadToServer)
);
});
</script>
svg
矢量图形
- 编写svg标签 添加默认宽高
- 编写svg绘图标签以及属性
实现
<svg width="800" height="800">
<!-- 矩形 -->
<rect
width="50"
height="50"
style="fill: red; stroke-width: 1px; stroke: #000;"
></rect>
<!-- 线段 -->
<line
x1="100"
y1="100"
x2="250"
y2="75"
style="stroke: blue; stroke-width: 1px;"
></line>
<line
x1="250"
y1="75"
x2="300"
y2="100"
style="stroke: blue; stroke-width: 1px;"
></line>
<!-- 圆形 -->
<circle
cx="200"
cy="200"
r="50"
stroke="green"
stroke-width="2"
fill="red"
></circle>
</svg>
项目矢量图svg
- viewport:svg可视区域
<svg width="100px" height="100px">
- viewBox:视区盒子,画布上绘制svg图形的坐标系统
<svg width="100%" height="100%" viewBox="0 0 100 100">
- preserveAspectRatio 默认值:“xMidYMid meet”
当 viewport 和 viewBox 比例出现突兀。
- meet slice
meet : viewBox保持和viewport合适宽高比,svg将优先考虑压缩比较小的作为最终压缩比。
500/200=2.5 200/200 = 1 所以压缩比是1。
slice :保持宽高比,不在viewport中的viewBox裁剪,优先考虑较大的宽高比。
500/200=2.5 200/200 = 1 所以压缩比是2.5。 - Min Max Min
xMid : viewBox x视口的中心
YMid : viewBox y视口中心 - preserveAspectRatio = “none”
不保存宽高比,根据viewport viewBox 宽高比计算显示 <defs>
定义成组件
<g id="more"></g>
隐藏里面的内容
<use href="#more"></use>
引用g id=“more”
<symbol>
同g 但是可以在g 设定viewBox,不用引用者设- 其他:
currentColor:继承父级的颜色
<line x1="0" y1="50" x2="100" y2="50" stroke-width="8" stroke="currentColor"></line>
stroke-dasharray:10; // 一段颜色 一段没有颜色
stroke-dashoffset:10; // 根据stroke-dasharray 右移
- 矢量图组件:
自定义:
html:
<svg> <use :href="iconname"></use>
js:
根据传入的name 获取iconname 渲染
iconf引入:
<script src="//at.alicdn.com/t/font_2164427_lzj78h68b5j.js"></script>
然后自定义的组件 通过name引入 - 绘制动画
1、平面
transform="translate(10,10) rotate(30) skewX(30) skewY(30) scale(0.5)"
2、矩阵 线性计算
matrix(2 1 -1 2 50 0)
[2,-1,50] => 2*_x+(-1)_y+50 = x
[1,2,0] => 1_x+(-2)*_y+0 = y
顶点坐标:
[0,0] => [50,0]
[100,0] => [250,100]
[100,50] => [200,200]
[0,50] => [0,100]
3、@keyframes
@keyframes circle{
from{
stroke-dasharray:0 1131;
}
to{
stroke-dasharray:1131 1131;
}
}
.circle{
animation: circle 5s linear infinite;
}
- logo描边动画
1、选择logo
2、设置 stroke-dasharray 和 stroke-dashoffset
3、对stroke-dashoffset设置动画
.logo{
width: 100%;
height: 100%;
fill:none;
stroke:#333;
stroke-width: 8px;
stroke-dasharray: 5029.8291015625 ;
animation:logo 5s linear 1 ;
}
@keyframes logo {
0% {
stroke-dashoffset:5029.8291015625;
}
50% {
stroke-dashoffset:0;
}
75%{
fill:red;
}
100%{
fill:burlywood
}
}
- SMIL动画
不需要css js
1、<set>
attributeName:改变的属性; to:变成啥样子; begin:动画开始时间;attributeType XML(获取的属性是当前的dom) css(监听的属性是css);
<svg width="200px" hegith="200px" >
<rect x="0" y="0" fill="red" width="100" height="50" >
<set attributeName="x" attributeType="XML" to="10" begin="1s"></set>
<set attributeName="x" attributeType="XML" to="20" begin="2s"></set>
<set attributeName="fill" attributeType="XML" to="blue" begin="3s"></set>
</rect>
</svg>
2、<animate>
repea