import {onMounted, ref} from "vue"; import blueImageUrl from '@/assets/login-rotate-blue.png' import yellowImageUrl from '@/assets/login-rotate-yellow.png' interface IPoint { x: number; y: number; } class CircleItem { ctx: CanvasRenderingContext2D img: HTMLImageElement r: number w: number h: number x: number y: number speed: number rectCenterPoint: IPoint cacheCanvas: HTMLCanvasElement cacheCtx: CanvasRenderingContext2D constructor(ctx: CanvasRenderingContext2D, img: HTMLImageElement, r: number, x: number, y: number, speed: number) { this.ctx = ctx this.img = img; this.r = r; this.w = r * 2; this.h = r * 2; this.x = x; this.y = y; this.speed = speed; this.rectCenterPoint = { x: r, y: r, }; this.cacheCanvas = document.createElement("canvas") this.cacheCtx = this.cacheCanvas.getContext("2d") as CanvasRenderingContext2D this.cache(); } draw() { this.rotate(); this.ctx.scale(1, 0.3); this.ctx.drawImage( this.cacheCanvas, 0, 0, this.w, this.h, this.x - this.r, this.y - this.r, this.r * 2, this.r * 2 ); this.ctx.scale(1, 1 / 0.3); } cache() { this.cacheCanvas.width = this.w; this.cacheCanvas.height = this.h; this.cacheCtx.save(); this.cacheCtx.beginPath(); this.cacheCtx.drawImage(this.img, 0, 0, this.r * 2, this.r * 2); this.cacheCtx.closePath(); this.cacheCtx.restore(); } rotate() { this.cacheCtx.clearRect(0, 0, this.w, this.h); this.cacheCtx.translate(this.rectCenterPoint.x, this.rectCenterPoint.y); this.cacheCtx.rotate((this.speed * Math.PI) / 180); this.cacheCtx.translate(-this.rectCenterPoint.x, -this.rectCenterPoint.y); this.cacheCtx.drawImage(this.img, 0, 0, this.r * 2, this.r * 2); } } // 旋转底座 export default function useRotateCanvas() { const CANVAS_W = 1800 const CANVAS_H = 600 const canvasRef = ref(); onMounted(() => { if (canvasRef.value) { const canvas = canvasRef.value const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; const blueImg = new Image(); blueImg.src = blueImageUrl; let rotateBlue: CircleItem blueImg.onload = function () { rotateBlue = new CircleItem(ctx, blueImg, 750, CANVAS_W / 2, 800, 1); }; const yellowImg = new Image(); yellowImg.src = yellowImageUrl; let rotateYellow: CircleItem yellowImg.onload = function () { rotateYellow = new CircleItem(ctx, yellowImg, 400, CANVAS_W / 2, 800, 0.6); }; function animate() { ctx.clearRect(0, 0, CANVAS_W, CANVAS_H); rotateBlue && rotateBlue.draw(); rotateYellow && rotateYellow.draw(); requestAnimationFrame(animate); } animate(); } }) return { canvasRef } }