使用canvas获取动态的心

最新推荐文章于 2022-11-09 18:39:01 发布

HQ8806

最新推荐文章于 2022-11-09 18:39:01 发布

阅读量490

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/LJM51200/article/details/126593799

版权

总代码

暗色的心

前言：只因在b站看到了动态酷炫的心，我就特别的想要学习，了解，弄清楚具体的代码是怎么敲的，就看了很久的视频，终于学会了，哈哈

先给大家看效果

这是五颜六色的心，但颜色有些暗

这是红色亮堂的心，还是这个心好看，嘿嘿

先给大家放总体代码，大家瞅瞅，看那种动态的，特酷炫的心，贼帅

总代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="cont" width="500px" height="500px">你好呀</canvas>
  <script>
     // 使用原生js操作canvas
    // 1.获取画布
    var canvas = document.querySelector('#cont')
    // 2.获取画布的上下文
    var ctx = canvas.getContext('2d')
    var w = 500,h=500
    // todo step1 画文字 
    drawText('❤',w/2,h/2)
    // 2.获取像素点
    var copy = ctx.getImageData(0,0,w,h)
    // 清除画布
    ctx.clearRect(0,0,w,h)
   
    // 产生随机数
    function r(num) {
      return parseInt(Math.random()*num)
    }
    // 运动次数
    var times = 100
    // 1. 定义小球类 
    function Ball(xEnd,yEnd) {
      // 起始位置,随机
      this.xStart = r(w)
      this.yStart = r(h)
      // 结束位置,固定
      this.xEnd = xEnd
      this.yEnd = yEnd
      // 计算运动速度,通过起始点和结束点
      this.xSpeed = (this.xEnd-this.xStart)/times
      this.ySpeed = (this.yEnd-this.yStart)/times

      // 小球运动的中心点
      this.x =this.xStart
      this.y = this.yStart

      // 设置半径和颜色
      this.r = 3
      this.color = '#f00' 

      // 设置填充文字和颜色
      this.text ='❤'
      this.color = 'rgb(255,'+r(255)+','+r(255)+')'
    }
    Ball.prototype.show = function () {
      //计算每次运动的坐标位置
      this.x += this.xSpeed
      this.y += this.ySpeed
      drawFillText(this.text,this.x,this.y,this.color)
      // drawCircle(this.x,this.y,this.r,this.color)
    }

    var leap = 12
    var ballArr = [] //小球数组
    for (var y = 0; y < h; y+=leap) {
      for (var x = 0; x < w; x+=leap) {
        var index = x + y*w
        var a = copy.data[index*4+3]
        if (a>128) {
          // 2.调用小球类,画圆
          var ball = new Ball(x,y)
          //存入数组
          ballArr.push(ball)
          //显示小球
          ball.show()
        }
      } 
    }

     // todo steps3 动起来
     var count = 0
    var timer = setInterval(() => {
      
      // 清除画布
      ctx.clearRect(0,0,w,h)
      for (var i = 0; i < ballArr.length; i++) {
       ballArr[i].show()      
      }
      count++
      // 判断何时停止
      if (count+1 == times) {
        clearInterval(timer)
        return
      }
    }, 20);


    // 画直线
    function drawLine(x1,y1,x2,y2,color) {
      ctx.beginPath()
      ctx.moveTo(x1,y1)
      ctx.lineTo(x2,y2)
      ctx.strokeStyle = color || '#000'
      ctx.stroke()
      ctx.closePath()
    }
    // 画文字
    function drawText(text,x,y) {
      ctx.font = '300px 微软雅黑'
      ctx.fillStyle = '#000'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(text,x,y,w)
    }
    // 画圆
    function drawCircle(x,y,r,color){
      ctx.beginPath()
      ctx.arc(x,y,r,0,Math.PI*2)
      ctx.fillStyle= color || '#000'
      ctx.fill()
    }

    // 画外部填充文字
    function drawFillText(text,x,y,color) {
      ctx.font = '12px 微软雅黑'
      ctx.fillStyle = color
      ctx.textAlign = 'center'
      ctx.fillText(text,x,y,w)
    }
  </script>
</body>
</html>

这个得到的是，红色的心

那第一个效果是怎样实现的呢？

暗色的心

在上面的设置填充文字和颜色中

把颜色改为

this.color = 'rgb('+r(255)+','+r(255)+','+r(255)+')'

就好了

HQ8806

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用canvas获取动态的心

只因在b站看到了动态酷炫的心，我就特别的想要学习，了解，弄清楚具体的代码是怎么敲的，就看了很久的视频，终于学会了，哈哈先给大家看效果这是五颜六色的心，但颜色有些暗这是红色亮堂的心，还是这个心好看，嘿嘿先给大家放总体代码，大家瞅瞅，看那种动态的，特酷炫的心，贼帅。...
复制链接

扫一扫