Detailed tutorial on using canvas with vue

Using Canvas in Vue.js

Vue.js is a popular JavaScript framework for building user interfaces. It provides a concise way to manage and render data while also supporting integration with other libraries and tools. To use Canvas in Vue.js, you can follow these steps:

1. Introducing Canvas in Vue.js project: You can <canvas>create Canvas by adding element in HTML file. Then, in the Vue.js component, name the element using refthe attribute <canvas>so that you can reference it in the Vue instance.

<template>
  <canvas ref="myCanvas"></canvas>
</template>

2. Operating Canvas in a Vue instance: In mountedthe hook function of the Vue component, you can obtain <canvas>the reference of the element and perform drawing operations therein.

<script>
export default {
    
    
  mounted() {
    
    
    const canvas = this.$refs.myCanvas;
    const ctx = canvas.getContext('2d');

    // 在 Canvas 上进行绘图操作
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
}
</script>

In the above example, we this.$refs.myCanvasobtained <canvas>the reference to the element through and getContext('2d')obtained the 2D drawing context using the method. Then, we use fillStylethe property to set the fill color to red, and use fillRect()the method to draw a rectangle that fills the entire Canvas.

Use of common methods

1. getContext('2d'): Get the 2D drawing context. It returns a context object used for drawing operations on the Canvas.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

2. beginPath(): Start a new path. It is used to define a path, which can contain straight lines, curves, arcs, etc.

ctx.beginPath();

3. closePath(): Closed path. It connects the start and end points of the current path to form a closed shape.

ctx.closePath();

4. lineTo(x, y): Add a straight line to the specified coordinate point. It is used to add a straight segment to a path.

ctx.lineTo(100, 100);

5. rect(x, y, width, height): Create a rectangular path. It is used to add a rectangle to the path.

ctx.rect(50, 50, 100, 100);

6. arc(x, y, radius, startAngle, endAngle, anticlockwise): Create an arc path. It is used to add an arc to a path.

ctx.arc(100, 100, 50, 0, Math.PI * 2, false);

7. moveTo(x, y): Move the starting point of the path to the specified coordinate point. It is used to move the current position in the path without drawing any lines.

ctx.moveTo(50, 50);

8. stroke(): Draw the border of the path. It is used to draw the border of the path according to the definition of the path.

ctx.stroke();

Here is a sample code for drawing a simple graph:

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制一个矩形
ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.closePath();
ctx.stroke();

// 绘制一个圆形
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2, false);
ctx.closePath();
ctx.stroke();

We first obtained <canvas>the reference to the element and getContext('2d')obtained the 2D drawing context through the method. Then, we beginPath()start a new path using the method, rect()draw a rectangular path using the method, closePath()close the path using the method and stroke()draw the border of the rectangle using the method. Next, we beginPath()start a new path again using the method, arc()draw a circular path using the method, closePath()close the path using the method and stroke()draw the border of the circle using the method.

A simple clock effect

You can slowly optimize the style according to your own preferences, both logic and drawing code are available

The following is a simple sample code that shows how to use Canvas to draw a clock effect:

<canvas id="clockCanvas" width="400" height="400"></canvas>

// 获取 Canvas 元素和 2D 上下文
const canvas = document.getElementById('clockCanvas');
const ctx = canvas.getContext('2d');

// 获取 Canvas 的中心点坐标
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// 绘制时钟的外圆
function drawClockFace() {
    
    
  ctx.beginPath();
  ctx.arc(centerX, centerY, 190, 0, Math.PI * 2);
  ctx.lineWidth = 5;
  ctx.strokeStyle = '#000';
  ctx.stroke();
  ctx.closePath();
}

// 绘制时钟的刻度
function drawClockTicks() {
    
    
  for (let i = 0; i < 12; i++) {
    
    
    const angle = Math.PI / 6 * i;
    const x1 = centerX + Math.sin(angle) * 160;
    const y1 = centerY - Math.cos(angle) * 160;
    const x2 = centerX + Math.sin(angle) * 180;
    const y2 = centerY - Math.cos(angle) * 180;

    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    ctx.closePath();
  }
}

// 绘制时钟的指针
function drawClockHands() {
    
    
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  // 绘制时针
  const hourAngle = Math.PI / 6 * (hours % 12) + Math.PI / 360 * minutes;
  const hourHandLength = 100;
  const hourX = centerX + Math.sin(hourAngle) * hourHandLength;
  const hourY = centerY - Math.cos(hourAngle) * hourHandLength;

  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(hourX, hourY);
  ctx.lineWidth = 8;
  ctx.strokeStyle = '#000';
  ctx.stroke();
  ctx.closePath();

  // 绘制分针
  const minuteAngle = Math.PI / 30 * minutes + Math.PI / 1800 * seconds;
  const minuteHandLength = 140;
  const minuteX = centerX + Math.sin(minuteAngle) * minuteHandLength;
  const minuteY = centerY - Math.cos(minuteAngle) * minuteHandLength;

  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(minuteX, minuteY);
  ctx.lineWidth = 5;
  ctx.strokeStyle = '#000';
  ctx.stroke();
  ctx.closePath();

  // 绘制秒针
  const secondAngle = Math.PI / 30 * seconds;
  const secondHandLength = 160;
  const secondX = centerX + Math.sin(secondAngle) * secondHandLength;
  const secondY = centerY - Math.cos(secondAngle) * secondHandLength;

  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(secondX, secondY);
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#f00';
  ctx.stroke();
  ctx.closePath();
}

// 绘制整个时钟
function drawClock() {
    
    
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawClockFace();
  drawClockTicks();
  drawClockHands();

  requestAnimationFrame(drawClock);
}

// 开始绘制时钟
drawClock();

In this sample code, we first obtain <canvas>the reference of the element and getContext('2d')obtain the 2D drawing context through the method. We then defined some functions to draw the various parts of the clock. drawClockFace()The function is used to draw the outer circle of the clock, drawClockTicks()the function is used to draw the scale of the clock, and drawClockHands()the function is used to draw the hands of the clock. In drawClockHands()the function, we use new Date()the method to get the current time and calculate the position of the pointer based on the hours, minutes, and seconds values. Finally, we use requestAnimationFrame()the method to call drawClock()the function in a loop to achieve the dynamic effect of the clock.