我从未使用过带有画布元素的动画，所以我试了一下。这是一个简单的动画，当鼠标放在画布上时开始动画，当鼠标移开时停止。

代码在这里

什么是帆布

它是从 HTML5 添加的，是一种可以使用 JavaScript 在 HTML 上绘制图形（位图图像​​）和图形的技术。此外，还可用于动画、游戏图形、数据可视化、照片处理、实时视频处理等。使用 HTML 元素和画布 API 进行绘制。

代码

HTML 指定了 canvas 元素、id 属性、width 属性和 height 属性。宽度和高度将是绘制范围，但如果不指定，则会设置width300px和height150px的初始值。

HTML

<canvas id="canvas" width="600" height="300"></canvas>

即使不指定CSS也没有问题，它被设置为删除边距并使画布元素的范围更易于理解。

CSS

/* reset */
* {
  margin: 0;
  padding: 0;
}

#canvas {
  background: #eee;
}

JS 被注释掉以便解释。

JS

var canvas = document.querySelector('#canvas');
// キャンパスに描画するためのCanvasRenderingContext2Dオブジェクトを取得するメソッド
// 二次元グラフィックを描画するために2dの指定
var ctx = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 5;
var dy = 2;
var radius = 20;
var af;

//----- ボールの描画 -----//
function drawBall() {
  // 新しいパスを作成する際の先頭を指定
  ctx.beginPath();
  // arc(円弧の中心の水平座標, 円弧の中心の垂直座標, 円弧の半径, 円弧の開始角度(0°), 円弧の終了角度(360°))
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  // 色の指定
  ctx.fillStyle = "#0095DD";
  // 図形の塗りつぶし
  ctx.fill();
}

//----- ボールの挙動 -----//
function draw() {
  // 図形をクリアする際に使用。図形は切り抜かれて透明に
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  x += dx;
  y += dy;

  // 衝突検知
  if (y + dy + radius > canvas.height || y + dy - radius < 0) {
    dy = -dy;
  }
  if (x + dx + radius > canvas.width || x + dx - radius < 0) {
    dx = -dx;
  }

  // 繰り返し処理開始
  // ディスプレイのリフレッシュ・レートによって更新速度が変化する
  af = requestAnimationFrame(draw);
}

canvas.addEventListener('mouseover', function (e) {
  // 繰り返し処理開始
  af = requestAnimationFrame(draw);
});

canvas.addEventListener('mouseout', function (e) {
  // 繰り返し処理の停止
  cancelAnimationFrame(af);
});

drawBall();

奖金

上面的2D动画好像不用canvas标签也能实现，但是我觉得以后在做3D动画的时候可以很好的了解一下canvas API是怎么工作的。这很简单，我尝试使用 canvasAPI 和库为文本设置动画。

代码在这里

最近，3D动画的库得到了增强，富网站的数量显着增加。我想创建这样一个网站，如果我能创建网络图形就很酷了。

参考网站

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308622676.html