canvas缩放动画操作代码-html代码-BFW代码库

canvas缩放动画操作代码

代码语言：html

所属分类：动画

代码描述：canvas缩放动画操作代码，可放大，缩小canvas画面，还可进行动画过渡、还有颜色过渡动画变换效果代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	font-family: Arial, sans-serif;
	background: #000;
}
#canvas {
	width: 100%;
	height: 100%;
}
#controls {
	position: absolute;
	top: 40px;
	left: 10px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 10px;
	border-radius: 5px;
}
button {
	margin: 5px;
	padding: 5px 10px;
	cursor: pointer;
}
#animatedZoom, #rainbow, #reset, #zoomIn, #zoomOut {
	background: linear-gradient(45deg, #ff00ff, #00ffff);
	color: white;
	border: none;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 25px;
	transition: all 0.3s ease;
	animation: pulse 2s infinite;
}
#animatedZoom:hover,
#rainbow:hover {
	transform: scale(1.1);
}
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}
#title {
	position: absolute;
	top: 10px;
	left: 10px;
	color: white;
	font-size: 18px;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>

  
  
</head>

<body translate="no">
  <canvas id="canvas"></canvas>
<div id="title">Mandelbrot Set: Click anywhere to zoom in</div>
<div id="controls">
	<button id="rainbow">Rainbow</button>
	<button id="animatedZoom">Animated Zoom</button>
	<br />
	<button id="zoomIn">Zoom In</button>
	<button id="zoomOut">Zoom Out</button>
	<button id="reset">Reset</button>
</div>
  
      <script  >
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let width, height;

let centerX = -0.5;
let centerY = 0;
let zoom = 200;
let animationId = null;
let zoomSpeed = 1.01;
let rainbowMode = false;
let rainbowPhase = 0;

function resize() {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
  drawMandelbrot();
}

function drawMandelbrot() {
  const imageData = ctx.createImageData(width, height);
  const maxIterations = 100;

  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      const zx = (x - width / 2) / zoom + centerX;
      const zy = (y - height / 2) / zoom + centerY;
      let cX = zx;
      let cY = zy;

      let iteration = 0;
      while (iteration < maxIterations) {
        const xtemp = cX * cX - cY * cY + zx;
        cY = 2 * cX * cY + zy;
        cX = xtemp;

        if (cX * cX + cY * cY > 4) break;
        iteration++;
      }

      const pixelIndex = (y * width + x) * 4;
      if (iteration === maxIterations) {
        imageData.data[pixelIndex] = 0;
        imageData.data[pixelIndex + 1] = 0;
        imageData.data[pixelIndex + 2] = 0;
      } else {
        const normalizedIteration = iteration / maxIterations;
        if (rainbowMode) {
          const hue = (normalizedIteration * 360 + rainbowPhase) % 360;
          const [r, g, b] = hslToRgb(hue / 360, 1, 0.5);
          imageData.data[pixelIndex] = r;
          imageData.data[pixelIndex + 1] = g;
          imageData.data[pixelIndex + 2] .........完整代码请登录后点击上方下载按钮下载查看