css3和canvas和js动画效果 js canvas 动画

CSS3是一种用于网页设计的样式表语言，它可以为网页添加各种各样的样式和效果。其中一个重要的特性是CSS3动画，它可以通过简单的代码实现网页元素的动态效果，使网页更加生动和吸引人。

在CSS3中，我们可以使用@keyframes规则来定义动画的关键帧。通过指定关键帧的百分比和相应的样式，我们可以控制元素在动画过程中的外观和位置。例如，下面的示例代码展示了一个简单的CSS3动画，使一个方块从左侧移动到右侧：

@keyframes myAnimation {
  0% { left: 0; }
  100% { left: 100px; }
}
.square {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  animation: myAnimation 2s infinite;
}

在上面的代码中，我们首先使用@keyframes规则定义了一个名为myAnimation的动画。这个动画从0%的关键帧开始，将方块的left属性设为0，然后在100%的关键帧结束时，将方块的left属性设为100px。接下来，我们将这个动画应用到一个名为square的元素上，通过设置animation属性为myAnimation，指定动画的持续时间为2秒，并且设置infinite属性使动画无限循环。

除了基本的动画效果，CSS3还提供了许多其他的特性，如过渡效果、变形效果、阴影效果等等。这些特性可以通过简单的CSS代码实现，使网页更加丰富多彩。

Canvas是HTML5中的一个重要特性，它提供了一个用于绘制图形的API。通过使用Canvas，我们可以在网页上绘制各种各样的图形，如线条、矩形、圆形等等。我们还可以使用JavaScript来控制Canvas，实现各种动画效果。

下面的示例代码展示了一个使用Canvas和JavaScript实现的简单动画，通过绘制不断变化的圆形，使其在画布上移动：

<canvas id="myCanvas" width="200" height="200"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 100;
var y = 100;
var radius = 50;
var dx = 2;
var dy = 2;
function drawCircle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = "red";
  ctx.fill();
  ctx.closePath();
  x += dx;
  y += dy;
  requestAnimationFrame(drawCircle);
}
drawCircle();

在上面的代码中，我们首先创建了一个Canvas元素，并通过JavaScript获取到该元素的上下文对象ctx。然后，我们定义了一些变量来控制圆形的位置和移动速度。接下来，我们使用drawCircle函数来绘制圆形，并通过ctx.arc方法绘制一个圆形，设置其半径为50，并使用fillStyle属性设置圆形的填充颜色为红色。在绘制完圆形后，我们通过改变x和y的值来实现圆形的移动效果，并使用requestAnimationFrame函数来不断重绘圆形，实现动画效果。

使用Canvas和JavaScript可以实现更加复杂的动画效果，如粒子效果、路径动画等等。Canvas还可以与其他HTML5特性结合使用，如WebGL、音频和视频等，为网页增加更多的交互和娱乐性。