canvas旋转箭幻觉

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

window.addEventListener("load",app);

function app() {
	var C = document.querySelector("canvas"),
		c = C.getContext("2d"),
		S = 2,
		W = C.width,
		H = C.height;

C.width = W * S;
	C.height = H * S;
	c.scale(S,S);

var arrowSize = 80,
		arrowPoints = [
			// points relative to center
			{x: -0.25, y: -0.5},
			{x: 0.25, y: -0.5},
			{x: 0.25, y: 0},
			{x: 0.5, y: 0},
			{x: 0, y: 0.5},
			{x: -0.5, y: 0},
			{x: -0.25, y: 0},
			{x: -0.25, y: -0.5}
		],
		cols = 6,
		rows = 5,
		colorA = "hsl(0,0%,14%)",
		colorB = "hsl(0,0%,86%)",
		step = 0,
		maxSteps = 180,
		phase = 0,
		turnPoint = maxSteps / 2,
		toBezierCurve = t => {
			let y1 = 0,
				y2 = 0,
				y3 = 1,
				y4 = 1,
				cY = 3 * (y2 - y1),
				bY = 3 * (y3 - y2) - cY,
				aY = y4 - y1 - cY - bY,
				y = (aY * t**3) + (bY * t**2) + (cY * t) + y1;

return y;
		},
		updateArrows = () => {
			let isPhase1 = phase == 1,
				progress = (step % turnPoint) / turnPoint,
				angle = toBezierCurve(progress) * 180;

if (isPhase1)
				angle = 360 - angle;

// determine background fill
			c.fillStyle = isPhase1 ? colorB : colorA;
			c.fillRect(0,0,W,H);

// then arrow color
			c.fillStyle = isPhase1 ? colorA : colorB;

// draw each arrow
			for (let row = -1; row <= rows; ++row) {
				for (let col = 0; col < cols; ++col) {
					let halfArrow = arrowSize/2,
						center = {
							x: arrowSize * col, 
							y: halfArrow + arrowSize * row + (step/maxSteps * arrowSize)
						};
					
					if (isPhase1) {
						center.x += halfArrow;
						center.y -= halfArrow;
					}

c.save();
					c.beginPath();
					c.translate(center.x,center.y);
					c.rotate(angle * Math.PI/180);
					arrowPoints.forEach((e,i) => {
						let point = {
							x: arrowSize * e.x,
							y: arrowSize * e.y
						};
						if (i == 0)
							c.moveTo(point.x,point.y);
						else
							c.lineTo(point.x,point.y);
					});
					c.fill();
					c.translate(-center.x,-center.y);
					c.closePath();
					c.restore();
				}
			}

// animation progress
			step += 1;
			if (step >= maxSteps)
				step = 0;

phase = step >= turnPoint ? 1 : 0;
		},
		render = () => {
			updateArrows();
			requestAnimationFrame(render);
		};

render();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg