|
@@ -48,6 +48,8 @@
|
|
|
height="300"
|
|
|
></canvas>
|
|
|
<div class="outOval outOvalCo2">
|
|
|
+ <div class="outCircle">
|
|
|
+ </div>
|
|
|
<div class="inOval">
|
|
|
</div>
|
|
|
<img
|
|
@@ -63,6 +65,8 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="outOval outOvalCarbon">
|
|
|
+ <div class="outCircle">
|
|
|
+ </div>
|
|
|
<div class="inOval">
|
|
|
</div>
|
|
|
<img
|
|
@@ -78,6 +82,8 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="outOval outOvalTree">
|
|
|
+ <div class="outCircle">
|
|
|
+ </div>
|
|
|
<div class="inOval">
|
|
|
</div>
|
|
|
<img
|
|
@@ -142,36 +148,98 @@ export default defineComponent({
|
|
|
videoLeft: 0,
|
|
|
});
|
|
|
|
|
|
- let uniformX = 200; // x 初始位置
|
|
|
+ let point1p = {}; // x 初始位置
|
|
|
+ let point2p = {}; // x 初始位置
|
|
|
+ let point3p = {}; // x 初始位置
|
|
|
let uniformSpeed = 1;
|
|
|
function circleMove(circtx) {
|
|
|
window.requestAnimationFrame(() => {
|
|
|
circleMove(circtx);
|
|
|
});
|
|
|
circtx.clearRect(0, 0, 800, 300);
|
|
|
- circtx.fillStyle = "#0000ff";
|
|
|
- drawCircle(circtx, uniformX, 200, 5, "green"); // 画圆,uniformX是 x 的坐标
|
|
|
-
|
|
|
- if (uniformX < 500) {
|
|
|
- uniformX += uniformSpeed;
|
|
|
- } else {
|
|
|
- uniformX = 0;
|
|
|
- }
|
|
|
+ circtx.fillStyle = "#FFDEB4";
|
|
|
+ circtx.shadowOffsetX = 0;
|
|
|
+ circtx.shadowOffsetY = 0;
|
|
|
+ circtx.shadowColor = "#ffffff";
|
|
|
+ circtx.shadowBlur = 10;
|
|
|
+ drawCircle(circtx, 3); // 画圆,uniformX是 x 的坐标
|
|
|
+ getPath(
|
|
|
+ { x: handlePx(173), y: handlePx(173) },
|
|
|
+ { x: handlePx(110), y: handlePx(120) },
|
|
|
+ { x: handlePx(20), y: handlePx(120) }
|
|
|
+ );
|
|
|
+ point2p = getPath2(
|
|
|
+ point2p,
|
|
|
+ { x: handlePx(515), y: handlePx(150) },
|
|
|
+ { x: handlePx(590), y: handlePx(150) },
|
|
|
+ { x: handlePx(676), y: handlePx(50) }
|
|
|
+ );
|
|
|
+ point3p = getPath2(
|
|
|
+ point3p,
|
|
|
+ { x: handlePx(512), y: handlePx(210) },
|
|
|
+ { x: handlePx(670), y: handlePx(210) },
|
|
|
+ { x: handlePx(756), y: handlePx(250) }
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
// 画实体圆(小球)
|
|
|
- function drawCircle(circtx, x, y, radius, color) {
|
|
|
+ function drawCircle(circtx, radius) {
|
|
|
// circtx.save();
|
|
|
circtx.beginPath();
|
|
|
- circtx.arc(x, y, radius, 0, Math.PI * 2);
|
|
|
+ circtx.arc(point1p.x, point1p.y, radius, 0, Math.PI * 2);
|
|
|
+ circtx.closePath();
|
|
|
+ circtx.fill();
|
|
|
+ circtx.beginPath();
|
|
|
+ circtx.arc(point2p.x, point2p.y, radius, 0, Math.PI * 2);
|
|
|
+ circtx.closePath();
|
|
|
+ circtx.fill();
|
|
|
+ circtx.beginPath();
|
|
|
+ circtx.arc(point3p.x, point3p.y, radius, 0, Math.PI * 2);
|
|
|
circtx.closePath();
|
|
|
circtx.fill();
|
|
|
// circtx.restore();
|
|
|
}
|
|
|
- function handleFont(num) {
|
|
|
+
|
|
|
+ function getPath(startp, middlep, endp) {
|
|
|
+ if (point1p.x > middlep.x && point1p.x <= startp.x) {
|
|
|
+ point1p.x = point1p.x - 1;
|
|
|
+ point1p.y =
|
|
|
+ point1p.y -
|
|
|
+ (1 * (middlep.y - startp.y)) / (middlep.x - startp.x);
|
|
|
+ }
|
|
|
+ if (point1p.x > endp.x && point1p.x <= middlep.x) {
|
|
|
+ point1p.x = point1p.x - 1;
|
|
|
+ point1p.y =
|
|
|
+ point1p.y -
|
|
|
+ (1 * (endp.y - middlep.y)) / (endp.x - middlep.x);
|
|
|
+ }
|
|
|
+ if (point1p.x == endp.x) {
|
|
|
+ point1p = startp;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function getPath2(pointp, startp, middlep, endp) {
|
|
|
+ if (pointp.x >= startp.x && pointp.x < middlep.x) {
|
|
|
+ pointp.x = pointp.x + 1;
|
|
|
+ pointp.y =
|
|
|
+ pointp.y +
|
|
|
+ (1 * (middlep.y - startp.y)) / (middlep.x - startp.x);
|
|
|
+ }
|
|
|
+ if (pointp.x < endp.x && pointp.x >= middlep.x) {
|
|
|
+ pointp.x = pointp.x + 1;
|
|
|
+ pointp.y =
|
|
|
+ pointp.y +
|
|
|
+ (1 * (endp.y - middlep.y)) / (endp.x - middlep.x);
|
|
|
+ }
|
|
|
+ if (pointp.x == endp.x) {
|
|
|
+ pointp = startp;
|
|
|
+ }
|
|
|
+ return pointp;
|
|
|
+ }
|
|
|
+ //px 转变成 rem
|
|
|
+ function handlePx(num) {
|
|
|
let fontSize = getBodySize();
|
|
|
- let handleNum = (num / 192) * fontSize;
|
|
|
- return handleNum;
|
|
|
+ let handleNum = (num / 192) * fontSize; //px转成rem 再转成px
|
|
|
+ return Number(handleNum.toFixed(0));
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
nextTick(() => {
|
|
@@ -182,56 +250,44 @@ export default defineComponent({
|
|
|
|
|
|
allData.videoWidth = videoWidth;
|
|
|
allData.videoLeft = (contWidth - videoWidth) / 2;
|
|
|
- // console.log(
|
|
|
- // "svideo",
|
|
|
- // svideo.value,
|
|
|
- // svideo.value.offsetWidth,
|
|
|
- // svideo.value.offsetHeight,
|
|
|
- // );
|
|
|
|
|
|
var c = document.getElementById("co2Canvas");
|
|
|
- c.setAttribute("width", handleFont(800) + "px");
|
|
|
- c.setAttribute("height", handleFont(300) + "px");
|
|
|
-
|
|
|
+ c.setAttribute("width", handlePx(800) + "px");
|
|
|
+ c.setAttribute("height", handlePx(300) + "px");
|
|
|
var ctx = c.getContext("2d");
|
|
|
-
|
|
|
- console.log(
|
|
|
- "sdsd",
|
|
|
- handleFont(676),
|
|
|
- handleFont(50),
|
|
|
- handleFont(590),
|
|
|
- handleFont(150),
|
|
|
- handleFont(515),
|
|
|
- handleFont(150)
|
|
|
- );
|
|
|
- ctx.moveTo(handleFont(20), handleFont(120));
|
|
|
- ctx.lineTo(handleFont(110), handleFont(120));
|
|
|
- ctx.lineTo(handleFont(173), handleFont(173));
|
|
|
+ ctx.moveTo(handlePx(20), handlePx(120));
|
|
|
+ ctx.lineTo(handlePx(110), handlePx(120));
|
|
|
+ ctx.lineTo(handlePx(173), handlePx(173));
|
|
|
ctx.lineWidth = 1;
|
|
|
ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
|
|
|
- ctx.setLineDash([handleFont(2), handleFont(3)]);
|
|
|
+ ctx.setLineDash([handlePx(2), handlePx(3)]);
|
|
|
ctx.stroke();
|
|
|
ctx.beginPath();
|
|
|
- ctx.moveTo(handleFont(676), handleFont(50));
|
|
|
- ctx.lineTo(handleFont(590), handleFont(150));
|
|
|
- ctx.lineTo(handleFont(515), handleFont(150));
|
|
|
+ ctx.moveTo(handlePx(676), handlePx(50));
|
|
|
+ ctx.lineTo(handlePx(590), handlePx(150));
|
|
|
+ ctx.lineTo(handlePx(515), handlePx(150));
|
|
|
ctx.lineWidth = 1;
|
|
|
ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
|
|
|
- ctx.setLineDash([handleFont(2), handleFont(3)]);
|
|
|
+ ctx.setLineDash([handlePx(2), handlePx(3)]);
|
|
|
ctx.stroke();
|
|
|
|
|
|
ctx.beginPath();
|
|
|
- ctx.moveTo(handleFont(756), handleFont(250));
|
|
|
- ctx.lineTo(handleFont(670), handleFont(210));
|
|
|
- ctx.lineTo(handleFont(512), handleFont(210));
|
|
|
+ ctx.moveTo(handlePx(756), handlePx(250));
|
|
|
+ ctx.lineTo(handlePx(670), handlePx(210));
|
|
|
+ ctx.lineTo(handlePx(512), handlePx(210));
|
|
|
ctx.lineWidth = 1;
|
|
|
ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
|
|
|
- ctx.setLineDash([handleFont(2), handleFont(3)]);
|
|
|
+ ctx.setLineDash([handlePx(2), handlePx(3)]);
|
|
|
ctx.stroke();
|
|
|
|
|
|
var circ = document.getElementById("circleCanvas1");
|
|
|
+ // circ.setAttribute("width", handlePx(800) + "px");
|
|
|
+ // circ.setAttribute("height", handlePx(300) + "px");
|
|
|
var circtx = circ.getContext("2d");
|
|
|
- // circleMove(circtx);
|
|
|
+ point1p = { x: handlePx(173), y: handlePx(173) };
|
|
|
+ point2p = { x: handlePx(515), y: handlePx(150) };
|
|
|
+ point3p = { x: handlePx(512), y: handlePx(210) };
|
|
|
+ circleMove(circtx);
|
|
|
});
|
|
|
});
|
|
|
|
|
@@ -302,35 +358,53 @@ export default defineComponent({
|
|
|
.round1 {
|
|
|
position: absolute;
|
|
|
width: 275px;
|
|
|
- left: 50%;
|
|
|
- top: -68px;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(-50%, -112px);
|
|
|
+ //top: -60px;
|
|
|
+ //transform: translate(-50%, -50%);
|
|
|
+ animation: round1Move 2s linear infinite alternate;
|
|
|
+ -webkit-animation: round1Move 2s linear infinite alternate;
|
|
|
+ -webkit-backface-visibility: hidden;
|
|
|
+ -webkit-transform-style: preserve-3d;
|
|
|
}
|
|
|
.round2 {
|
|
|
position: absolute;
|
|
|
width: 275px;
|
|
|
- left: 50%;
|
|
|
- top: -46px;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(-50%, -100px);
|
|
|
+ //top: -40px;
|
|
|
+ //transform: translate(-50%, -50%);
|
|
|
+ animation: round2Move 2s linear infinite alternate;
|
|
|
+ -webkit-animation: round2Move 2s linear infinite alternate;
|
|
|
+ -webkit-backface-visibility: hidden;
|
|
|
+ -webkit-transform-style: preserve-3d;
|
|
|
}
|
|
|
.round3 {
|
|
|
position: absolute;
|
|
|
width: 295px;
|
|
|
- left: 50%;
|
|
|
- top: -25px;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(-50%, -60px);
|
|
|
+ //top: -20px;
|
|
|
+ //transform: translate(-50%, -50%);
|
|
|
+ animation: round3Move 2s linear infinite alternate;
|
|
|
+ -webkit-animation: round3Move 2s linear infinite alternate;
|
|
|
+ -webkit-backface-visibility: hidden;
|
|
|
+ -webkit-transform-style: preserve-3d;
|
|
|
}
|
|
|
.round4 {
|
|
|
position: absolute;
|
|
|
width: 340px;
|
|
|
- left: 50%;
|
|
|
+ left: 0;
|
|
|
top: -10px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
.round5 {
|
|
|
position: absolute;
|
|
|
width: 376px;
|
|
|
- left: 50%;
|
|
|
+ left: 0;
|
|
|
top: 0px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
@@ -362,13 +436,21 @@ export default defineComponent({
|
|
|
.outOval {
|
|
|
width: 152px;
|
|
|
height: 68px;
|
|
|
- border: 1px dashed rgba(224, 194, 155, 0.26);
|
|
|
- border-radius: 50%;
|
|
|
position: absolute;
|
|
|
display: flex;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- animation: mycircle 3s linear infinite alternate;
|
|
|
- -webkit-animation: mycircle 3s linear infinite alternate;
|
|
|
+ .outCircle {
|
|
|
+ width: 152px;
|
|
|
+ height: 68px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ border: 1px dashed rgba(224, 194, 155, 0.26);
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: mycircle 3s linear infinite;
|
|
|
+ -webkit-animation: mycircle 3s linear infinite;
|
|
|
+ }
|
|
|
.inOval {
|
|
|
width: 112px;
|
|
|
height: 40px;
|
|
@@ -380,7 +462,7 @@ export default defineComponent({
|
|
|
font-size: 0;
|
|
|
width: 70px;
|
|
|
position: absolute;
|
|
|
- top: 4px;
|
|
|
+ top: 6px;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, 0);
|
|
|
}
|
|
@@ -419,7 +501,37 @@ export default defineComponent({
|
|
|
to {
|
|
|
width: 200px;
|
|
|
height: 98px;
|
|
|
- opacity: 0.3;
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes round1Move {
|
|
|
+ from {
|
|
|
+ //top: -60px;
|
|
|
+ transform: translate(-50%, -112px);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ //top: -80px;
|
|
|
+ transform: translate(-50%, -140px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes round2Move {
|
|
|
+ from {
|
|
|
+ //top: -40px;
|
|
|
+ transform: translate(-50%, -100px);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ //top: -56px;
|
|
|
+ transform: translate(-50%, -116px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes round3Move {
|
|
|
+ from {
|
|
|
+ //top: -20px;
|
|
|
+ transform: translate(-50%, -60px);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ //top: -35px;
|
|
|
+ transform: translate(-50%, -75px);
|
|
|
}
|
|
|
}
|
|
|
.outOvalCo2 {
|