进度条组件雏形（应用到框架中需进一步封装）
2018-04-26 本文已影响0人
Awesome199
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.canvasBox{
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div class="canvasBox" onclick="handle">
<canvas class="canvas" width='600' height='100' onclick=""></canvas>
<canvas class="canvas1" width='600' height='100' onclick=""></canvas>
<canvas class="canvas2" width='600' height='100' onclick=""></canvas>
<canvas class="canvas3" width='600' height='100' onclick=""></canvas>
<canvas class="canvas4" width='600' height='100' onclick=""></canvas>
</div>
</body>
<script>
let dom =document.querySelector('.canvasBox')
dom.onclick = function() {
console.log(1)
}
let draw = (percent, boxSize, target, targetColor, title, label ) => { // 画图的逻辑
// 去除锯齿
let canvas =document.querySelector(target)
const width = canvas.width,height=canvas.height;
const cxt = canvas.getContext('2d')
if (window.devicePixelRatio) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * window.devicePixelRatio;
canvas.width = width * window.devicePixelRatio;
cxt.scale(window.devicePixelRatio, window.devicePixelRatio);
};
// 初始化配置项
let start = 160;
let cWidth = width;
let cHeight = height;
let maxLength = 400;
let baseColor = '#e2ecfa';
let coverColor = targetColor || '#2b73f9';
let fontColor = '#78849A';
let fontFamily = '24px DINCondensed-Bold';
let ajustHeight = 20;
let radius = 65;
let lineWidth = 12;
const finalRadian = maxLength * percent / 100; // 小圆圈的终点弧度
const step = maxLength / 100; // 一个1%对应的弧度大小
let text = 0; // 显示的数字
let num = 0; // 仪表盘进度
let PI = Math.PI
let titleText = title || '60%'
let labelText = label || '人均带看'
// 添加动画效果
window.requestAnimationFrame(paint);
function paint() { // 绘制图样
cxt.clearRect(0, 0, cWidth, cHeight); // 每次绘制都先清空画布
let endRadian = start + num * step;
// 底色
drawCanvas(maxLength + start, 30, baseColor, lineWidth,start);
// 进度
drawCanvas(endRadian, 30, coverColor, lineWidth,start);
// 小圆头
// 小圆头其实就是一个圆，关键的是找到其圆心
fillCanvas(endRadian, 30, 3, 0, 2 * PI, baseColor, 1);
// 填充数字
drawFonts('0',start-10,60)
drawFonts('20',start-10+20*step,60)
drawFonts('80',start-10+80*step,60)
drawFonts('100',start-10+100*step,60)
drawFonts('100',start-10+100*step,60)
//绘制标题和数值
drawFonts(titleText,start-60,40,'#3d4049',fontFamily)
drawFonts(labelText,start-60,60,'#8e9db2')
num++;
text++;
if (num <= percent) {
window.requestAnimationFrame(paint);
}
if (num >= percent) { // 小数和超出范围处理
text = percent
return
}
if (num >= 100) { // 小数和超出范围处理
num = 100
text = percent
return
}
if (percent <= 0) { // 小数和超出范围处理
num = 0
text = percent
return
}
}
function drawCanvas(x, y, color, lineWidth,start) { // 描边轮廓绘图
cxt.beginPath();
cxt.lineCap = "round";
cxt.strokeStyle = color;
cxt.lineWidth = lineWidth;
cxt.moveTo(start, 30);
cxt.lineTo(x,y)
cxt.stroke();
}
function fillCanvas(x, y, r, sRadian, eRadian, color, lineWidth) { // 填充内容绘图
cxt.beginPath();
cxt.lineCap = "round";
cxt.fillStyle = color;
cxt.lineWidth = lineWidth;
cxt.arc(x, y, r, sRadian, eRadian, false);
cxt.fill();
}
function drawFonts(text,x,y,fontColor,fontFamily) { //绘制文字
cxt.beginPath();
cxt.fillStyle = fontColor || '#e6eaed'; // 初始化填充样式
cxt.font = fontFamily || '16px sans-serif';
cxt.textAlign = 'right'
let textWidth = cxt.measureText(text).width;
cxt.fillText(text, x, y);
}
}
draw(90,300,'.canvas')
draw(90,300,'.canvas1','#05da98')
draw(90,300,'.canvas2','#f50e65')
draw(90,300,'.canvas3','#f50e65','1000','成交量')
draw(90,300,'.canvas4')
function handle() {
console.log(1)
}
</script>
</html>
