Vue基础教程：学习画布创建动态网页

发布时间：2023-05-16
Vue是一种用于构建交互式Web界面的渐进式JavaScript框架。它专注于视图层，具有易用性和灵活性。本篇文章将介绍如何使用Vue创建动态网页，并在其中加入画布(canvas)等元素，让网页更加生动有趣。

一、安装Vue

要使用Vue， 必须先在自己的代码中引入Vue库。 可以在head标签中添加以下代码引用Vue；或者通过CDN使用Vue。以本文为例，我们先通过引用Vue来学习如何使用Vue创建动态网页： 
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

二、创建Vue实例

通过Vue.createApp创建Vue实例。 Vue.createApp的参数是Vue组件名。 
  
  

    {{ message }}
  
  

  <script>
    const App = {
      data() {
        return {
          message: 'Hello, Vue!'
        }
      }
    }
    const app = Vue.createApp(App)
    app.mount('#app')
  </script>
在这个例子中，我们创建了一个Vue实例，并给它的data属性添加了一个message变量，然后在HTML中将message变量绑定到"id为app"的div元素中。

三、使用画布（canvas）

使用Vue和Canvas创建动态效果的一个例子是显示爆炸效果。要实现这个例子，首先需要在HTML中添加一个canvas元素。可以使用Vue来动态更新canvas中的图形。 
  
  
  <script>
    const App = {
      mounted() {
        this.draw();
      },
      methods: {
        draw() {
          let canvas = document.getElementById('boom')
          let ctx = canvas.getContext('2d')
          ctx.fillStyle = 'black'
          ctx.fillRect(0, 0, canvas.width, canvas.height)
	  //添加爆炸效果
          for(let i = 0; i < 200; i++) {
            let x = (Math.random() - 0.5) * canvas.width
            let y = (Math.random() - 0.5) * canvas.height
            let r = Math.random() * 3
            let speedX = (Math.random() - 0.5) * 10
            let speedY = (Math.random() - 0.5) * 10
            let color = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255}`
            ctx.beginPath()
            ctx.fillStyle = color
            ctx.arc(x, y, r, 0, Math.PI * 2, false)
            ctx.fill()
          }
          requestAnimationFrame(this.draw);
        }
      }
    }
    const app = Vue.createApp(App);
    app.mount('#boom');
  </script>
通过使用一个for循环，在canvas上添加了200个随机颜色和位置的圆形。然后使用window.requestAnimationFrame()方法请求浏览器在下一次重绘之前执行这个绘图函数并进行常量更新，直到动画停止或该元素不再处于文档中。

四、Vue组件

Vue创建组件可以将功能单一、结构清晰的代码块放在一起，代码的内聚性更强。组件还可以被嵌套、复用。要创建一个Vue组件，需要使用Vue.component函数。以下是一个简单的组件示例： 
  
  

    
  
  

  <script>
    Vue.component('hello-world', {
      template: '<div>Hello, World!</div>'
    })
    const app = Vue.createApp({})
    app.mount('#app')
  </script>
在上面的代码中，Vue.component定义了一个名为“hello-world”的组件。template属性中定义了组件的结构。

五、使用组件和画布(canvas)创建带爆炸效果的按钮

通过使用组件和画布(canvas)可以创建一个带爆炸效果的按钮。当鼠标在按钮上移动时，将显示爆炸效果。 
  
  

    
  
  

  <script>
    Vue.component('fire-button', {
      props: {},
      data() {
        return {
          canvas: null,
          ctx: null,
          points: [],
          ticker: null
        }
      },
      template: `
      <div class="fireBtn">
        <canvas 
          ref="canvas"
          @mousemove="onMouseMove"
          @mouseleave="onMouseLeave"
          @mousedown="onMouseDown"
          @mouseup="onMouseUp"
        />
      </div>`,
      mounted() {
        this.$nextTick(() => {
          this.canvas = this.$refs.canvas;
          this.ctx = this.canvas.getContext('2d');
          this.init();
        });
      },
      methods: {
        init() {
          this.canvas.width = this.$el.offsetWidth;
          this.canvas.height = this.$el.offsetHeight;
          window.addEventListener('resize', this.init);
          this.ticker = setInterval(this.animate, 1000 / 60);
        },
        onMouseLeave() {
          this.points.splice(0, this.points.length);
        },
        onMouseMove(event) {
          const rect = this.canvas.getBoundingClientRect();
          const x = event.clientX - rect.left;
          const y = event.clientY - rect.top;
          const point = new Point(x, y);
          this.points.push(point);
        },
        onMouseDown() {
          this.canvas.style.opacity = 0.5;
        },
        onMouseUp() {
          this.canvas.style.opacity = 1;
        },
        animate() {
          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
          for (var i = 0, len = this.points.length; i < len; i++) {
            if (this.points[i].rad < 0) {
              this.points.splice(i, 1);
              len--;
              i--;
              continue;
            }

            this.ctx.beginPath();
            this.ctx.fillStyle = this.points[i].color;
            this.ctx.arc(this.points[i].x, this.points[i].y, this.points[i].rad, 0, Math.PI * 2, false);
            this.ctx.fill();
            this.points[i].rad -= this.points[i].baseRad / 50;
          }
        }
      },
      beforeDestroy() {
        clearInterval(this.ticker);
      }
    });

    const Point = function (x, y) {
      this.x = x;
      this.y = y;
      this.rad = 10;
      this.baseRad = 8 + Math.random() * 10;
      this.color = `rgb(${255},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`;
    }

    const app = Vue.createApp({})
    app.mount('#app')
  </script>
在上面的代码中，我们创建了一个名为“fire-button”的Vue组件。通过监听鼠标移动事件，将生成一组点，组成一个圆形。通过组件样式和方法，实现了鼠标移动时的爆炸效果。 总结 本文介绍了如何使用Vue创建动态网页，并介绍了如何使用canvas添加爆炸效果。还介绍了如何创建Vue组件并将爆炸效果与组件一起使用。 希望这篇文章能帮助您更好地了解和使用Vue，并为您的Web开发工作带来灵感。
推荐文章