css3和canvas效果

CSS3是一种用于网页设计的样式表语言，它为网页开发人员提供了丰富的样式和效果选项。其中一些效果可以通过CSS3属性来实现，而另一些则需要使用canvas元素来实现。

1. CSS3效果：

CSS3提供了许多新的样式属性，使网页开发人员能够实现各种各样的效果。其中一些常见的CSS3效果包括过渡（transition）、变换（transform）和动画（animation）。

过渡效果可以使元素在不同状态之间平滑地过渡。通过指定过渡的属性、持续时间和速度曲线，可以创建出各种各样的过渡效果。例如，以下代码演示了当鼠标悬停在一个按钮上时，按钮的颜色从红色过渡到绿色的效果：

.button {
  background-color: red;
  transition: background-color 1s ease;
}
.button:hover {
  background-color: green;
}

变换效果可以改变元素的形状、大小、位置或者旋转。通过指定不同的变换函数，可以实现各种各样的变换效果。例如，以下代码演示了一个元素在鼠标悬停时旋转180度的效果：

.box {
  transform: rotate(0deg);
  transition: transform 1s ease;
}
.box:hover {
  transform: rotate(180deg);
}

动画效果可以使元素按照一定的时间和方式进行动画。通过指定关键帧和动画属性，可以实现各种各样的动画效果。例如，以下代码演示了一个元素在3秒内从左边滑动到右边的效果：

.box {
  position: relative;
  left: 0;
  animation: slide 3s linear infinite;
}
@keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

2. canvas效果：

Canvas是HTML5新增的一个元素，它提供了一种通过JavaScript绘制图形的方式。通过在canvas上绘制图形、添加动画或者处理用户交互，可以实现各种各样的效果。

以下是一个简单的canvas示例，绘制了一个红色的矩形：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);
</script>

在canvas中，首先需要获取到canvas元素的上下文（context），然后使用上下文的方法来绘制图形。上面的代码中，我们获取到了一个2D上下文（"2d"），然后使用fillRect方法绘制了一个红色的矩形。

除了绘制基本的形状，canvas还支持绘制路径、渐变、阴影等高级效果。例如，以下代码演示了如何绘制一个带有渐变背景和阴影的圆形：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "white");
  ctx.fillStyle = gradient;
  ctx.shadowBlur = 10;
  ctx.shadowColor = "black";
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, 2 * Math.PI);
  ctx.fill();
</script>

在上面的代码中，我们首先创建了一个径向渐变（createRadialGradient），然后使用addColorStop方法指定渐变的颜色。接着，我们设置了填充样式（fillStyle）、阴影模糊度（shadowBlur）和阴影颜色（shadowColor），最后使用arc方法绘制了一个圆形，并使用fill方法填充了颜色。

CSS3和canvas都是用于实现网页效果的技术。CSS3提供了丰富的样式属性，可以实现过渡、变换和动画等效果；而canvas则提供了绘制图形的能力，可以实现各种各样的图形和效果。使用它们可以为网页增加更多的交互和视觉效果，提升用户体验。