This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

canvasThe related documents

  • Canvas Api
  • CANVAS quick reference table

Renderings are displayed

  • The first one is random colors and random sizes

  • The second one is a random background image with a random size scatter effect (I’m using the same image here so I don’t show different images)

Case complete code

  • This example is usedvueOther methods andvueSimilarly, change the corresponding syntax to achieve the effect.
  • Student: The case usesvueParent and child components pass values

Parent component code

<template>
  <div id="home">
      <div class="tags" ref="tags">
        <circle-box :parentClientWidth="parentClientWidth" :parentClientHeight="parentClientHeight" :dataList="dataList"></circle-box>
      </div>
  </div>
</template>
Copy the code
<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, image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 3, image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 4, image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 5, image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 6, image: "http://39.99.139.115/demo/RB5.png"}, {follow: 7, image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 8, image: "http://39.99.139.115/demo/RB5.png"}, {follow: 9, image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 10, image: 'http://39.99.139.115/demo/RB5.png'}],}; }, created() {}, mounted() { this.getWidth(); }, methods: {getWidth() {this.parentClientWidth = this.$refs.tags. ClientWidth; this.parentClientHeight = this.$refs.tags.clientHeight; console.log(this.$refs.tags.clientWidth); }}}; </script>Copy the code

Subcomponent code

<template>
  <div>
    <canvas id="myCanvas" :width="parentClientWidth + 'px'" :height="parentClientHeight + 'px'"></canvas>
  </div>
</template>
Copy the code
<script> export default {// Props: ['parentClientWidth', 'parentClientHeight', 'dataList'], data() { return { dataListCopy: $nextTick(() => {this.datalist}}, created() {this.datalist}}, created() {this.datalist}}, mounted() {}, methods: { circleInfo() { let that = this class Circle { constructor(x, y, r, color) { this.x = x this.y = y this.r = r this.c = color ? color : GetRandomColor () {let r = math.floor (math.random () * 100) + 155 let g = Math.floor(Math.random() * 100) + 155 let b = Math.floor(Math.random() * 100) + 155 return `rgb(${r},${g},${b})` } } class RandomCircle { constructor(obj) { this.c = document.getElementById(obj.id) console.log(this.c) this.ctx = this.c.getContext('2d') this.dWidth = this.c.width this.dHeight = this.c.height this.fix = obj.fix || true this.minMargin = obj.minMargin || 20 this.minRadius = obj.minRadius || 30 this.radiuArr = obj.radiuArr || [30, 30, 30, 30, 30, 30, 30, 30, 30, 30] this.total = obj.total || 10 this.circleArray = [] this.circleNumber = 1 } drawOneCircle(c, index) { // console.log(c, StrokeStyle = c.cctx.fillstyle = c.c // draw a circle ctx.arc(c.x, c.y, c.r, 0, 2 * Math.PI) ctx.stroke() ctx.fill() // ctx.textAlign = 'center' // ctx.textBaseline = 'middle' // ctx.fillStyle = // ctx.fillText(that. DataListCopy [index]. Follow, c.x, Img = new Image() img.src = th.datalistCopy [index]. Image CTX. DrawImage (img, c.x-c.r, c.y - c.r, c.r * 2, c.r * 2) this.circleNumber++ } check(x, y, r) { return ! (x + r > enclosing dWidth | | x - r < 0 | | y + r > enclosing dHeight | | y - r < 0)} / / to get a new round radius, The distance between the radius and the nearest circle getR(x, y) { if (this.circleArray.length === 0) return Math.floor(Math.random() * 20 + 20) let lenArr = this.circleArray.map((c)  => { let xSpan = c.x - x let ySpan = c.y - y return Math.floor(Math.sqrt(Math.pow(xSpan, 2) + Math.pow(ySpan, 2))) - c.r }) let minCircleLen = Math.min(... lenArr) let minC = this.circleArray[lenArr.indexOf(minCircleLen)] let tempR = this.fix ? this.radiuArr[this.circleArray.length] : minCircleLen - this.minMargin let bool = this.fix ? tempR <= minCircleLen - minC.r : tempR >= this.minRadius return bool ? TempR: false} // Generates a circle, randomly generating the center. // If the radius is not suitable for 200 consecutive times, CreateOneCircle () {let x, y, r let createCircleTimes = 0 while (true) { createCircleTimes++ x = Math.floor(Math.random() * this.dWidth) y = Math.floor(Math.random() * this.dHeight) let TR = this.getR(x, y) if (! TR) { continue } else { r = TR } if (this.check(x, y, r) || createCircleTimes > 200) { break } } this.check(x, y, R) &&this.cirClearRay.push (new Circle(x, y, r))} // Terminate the process if none of the 100 options are available. init() { let n = 0 while (this.circleArray.length < this.total) { this.circleArray = [] let i = 0 while (this.circleArray.length < this.total) { this.createOneCircle() i++ if (i >= 100) { break } } n++ if (n > 100) { break } } // Draw circles from large to small radius. this.circleArray .sort((a, b) => b.r - a.r) .forEach((c, index) => { this.drawOneCircle(c, index) }) } } // console.log(this.circle); const p = new RandomCircle({ id: 'myCanvas', total: Thate.datalistcopy.length // Config number}) p.it () console.log(p) console.log(p.cerclearray)}}} </script>Copy the code