Vue 用 Canvas 生成随机大小不重叠圆

最新推荐文章于 2022-06-29 14:13:13 发布

学web的碎碎

最新推荐文章于 2022-06-29 14:13:13 发布

阅读量944

点赞数 2

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42695298/article/details/121106714

版权

本文介绍如何使用Vue.js结合Canvas API创建随机大小且不重叠的圆。通过父子组件间的通信，实现了随机颜色和背景图片的动态效果，提供了完整的代码示例。

摘要由CSDN通过智能技术生成

`canvas` 相关文档

Canvas Api
CANVAS速查简表

效果图展示

第一张是 随机颜色随机大小聚合 在一起效果
第二张是 随机背景图片随机大小分散 效果（这里我使用的图片都一样所以没展现出不同图片）

案例完整代码

本实例是用 vue 来实现的，其他方法和 vue 类似，改为对应的语法即可实现效果。
案例用到了 vue 父子组件传值

父组件代码

<template>
  <div id="home">
      <div class="tags" ref="tags">
        <circle-box :parentClientWidth="parentClientWidth" :parentClientHeight="parentClientHeight" :dataList="dataList"></circle-box>
      </div>
  </div>
</template>

<script>
import CircleBox from '@/components/content/circle/Circle.vue'
export default {
  components: { CircleBox },
  data() {
    return {
      parentClientWidth: 0,
      parentClientHeight: 0,
      // canvas 模拟数据
      dataList: [
       {
          follow: 1,
          image: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          follow: 2,
          ima