HTML5的canvas绘图和CSS3的绘图哪个更有优越性?

html-css018

HTML5的canvas绘图和CSS3的绘图哪个更有优越性?,第1张

简单解释一下: CSS更像是把多个“矩形”(div)裁剪后,然后拼接成一个图案,然后给图案上色。 Canvas由点开始,延长无数个点,得到线,延长线之后得到一个面(三角形,圆形,矩形等等的图案面),然后给线或者面描边,上色。 CSS目前更像是小朋友的手工课,Canvas更像是用一支笔画图,不过画出来的图更加像能够控制大小的矢量图片。在面对曲线和更复杂图形的时候,Canvas比CSS更有办法。另外Canvas确定坐标位置的时候更加贴近常用到的数学思维方法。

实现思路:

用一个铺满蓝色的背景的盒子,

利用::before与after画2个圆角值不同的不规则圆形(其中一个设置透明度或者其他颜色,以便区分):

父元素设置overflow:hidden;

最后加上animation 动画让不同规则圆形旋转起来即可:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="wave"></div>

</body>

<style>

    /* // 简单的盒子 */

.wave {

  position: relative

  width: 150px

  height: 150px

  background-color: #5291e0

  /* overflow: hidden*/

}

/* // 两个不规则圆形(相对盒子进行定位,距离底部距离则为波浪高度) */

.wave::before,

.wave::after {

    content: ""

    position: absolute

    left: 50%

    bottom: 15%

    width: 500%

    height: 500%

    border-radius: 45%

    background-color: #fff

  transform: translateX(-50%)

    animation: rotate 15s linear infinite

  }

  /* // 其中一个不规则圆形调整一下样式,以便区分(或者调整animation的参数来区分) */

  .wave::before {

    bottom: 10%

    opacity: .5

    border-radius: 47%

}

/* // 旋转动画 */

@keyframes rotate {

  from {

    transform: translateX(-50%) rotateZ(0deg)

  }

  to {

    transform: translateX(-50%) rotateZ(360deg)

  }

}

</style>

</html>