@lew
To refresh a canvas by click in Vue.js, you can create a method in your Vue component that handles the click event and redraws the canvas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<template> <div> <canvas ref="canvas"></canvas> <button @click="refreshCanvas">Refresh Canvas</button> </div> </template> <script> export default { data() { return { canvas: null, ctx: null }; }, mounted() { this.canvas = this.$refs.canvas; this.ctx = this.canvas.getContext('2d'); // draw initial canvas content here this.ctx.fillStyle = 'red'; this.ctx.fillRect(10, 10, 50, 50); }, methods: { refreshCanvas() { // clear the canvas this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // draw new content this.ctx.fillStyle = 'blue'; this.ctx.fillRect(30, 30, 50, 50); } } }; </script> |
In this example, we have a canvas element and a button in the template. When the button is clicked, the refreshCanvas
method is called, which clears the canvas using clearRect
and then draws new content using fillRect
.
Make sure to replace the initial canvas drawing code with your actual drawing logic.