A comprehensive guide to mastering canvas JS technology

From Beginner to Mastery: Canvas JS Technical Guide

Introduction:
Canvas is an important feature in HTML5 that can dynamically draw graphics through JavaScript. It provides powerful drawing functions that can be used to create charts, draw graphs, and display data. This article will use code examples to gradually guide readers to become familiar with Canvas JS technology from the entry level to help you improve your drawing capabilities.

1. Basic usage of Canvas
We first need to add a Canvas element to the HTML file, and then use JavaScript to obtain its context. Here is a simple example:

<canvas id="myCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

With the above code, we create a canvas with a size of 500x500 pixels and obtain its drawing context.

2. Draw basic graphics

1. Draw a rectangle

   context.fillStyle = "red";
   context.fillRect(100, 100, 200, 150);

   The above code will draw a red rectangle on the canvas, with the starting point coordinates (100 , 100), width is 200, and height is 150.

2. Draw a circle

   context.beginPath();
   context.arc(250, 250, 100, 0, Math.PI * 2, false);
   context.fillStyle = "green";
   context.fill();

   The above code draws a green circle with a center coordinate of (250, 250) and a radius of 100.

3. Draw a straight line

   context.beginPath();
   context.moveTo(100, 100);
   context.lineTo(300, 300);
   context.lineWidth = 5;
   context.strokeStyle = "blue";
   context.stroke();

   The above code draws a starting point coordinates (100, 100), end point coordinates (300, 300), line width is 5, The color is blue straight line.

3. Draw a chart

1. Draw a bar chart

var data = [30, 50, 70, 90];
var colors = ["red", "green", "blue", "yellow"];

// 绘制坐标系
context.beginPath();
context.moveTo(50, 50);
context.lineTo(50, 350);
context.lineTo(450, 350);
context.stroke();

for (var i = 0; i < data.length; i++) {
  var barHeight = data[i];
  var barX = 60 + i * 80;
  var barY = 350 - barHeight;

  // 绘制柱状图
  context.fillStyle = colors[i];
  context.fillRect(barX, barY, 50, barHeight);
}

The above code draws a simple bar chart. The data array stores the height of each column, and the colors array stores the color of each column. Traverse the data array through a for loop and draw each column in turn.

2. Draw a pie chart

var data = [20, 30, 40, 10];
var colors = ["red", "green", "blue", "yellow"];

var total = data.reduce(function (a, b) {
  return a + b;
}, 0);

var startAngle = 0;

for (var i = 0; i < data.length; i++) {
  var endAngle = startAngle + (data[i] / total) * Math.PI * 2;

  context.beginPath();
  context.moveTo(250, 250);
  context.arc(250, 250, 200, startAngle, endAngle, false);
  context.closePath();

  context.fillStyle = colors[i];
  context.fill();

  startAngle = endAngle;
}

The above code draws a pie chart. The data array stores the size of each sector, and the colors array stores the color of the sector. Calculate the starting angle and ending angle of each sector through a loop, and use the arc method to draw the sector.

Conclusion:
This article introduces the basic usage of Canvas JS technology and the process of drawing charts through code examples. Canvas provides a wealth of drawing functions, which can be used from simple graphic drawing to complex chart display. I hope this article can help readers deepen their understanding of Canvas JS technologies, apply them in actual projects, and improve their drawing abilities.

The above is the detailed content of A comprehensive guide to mastering canvas JS technology. For more information, please follow other related articles on the PHP Chinese website!