canvas系列教程之基础图形

首先推荐两个经典前端学习网站:https://www.w3schools.com/https://developer.mozilla.org/zh-CN/。画之前的准备工作:获取Canvas元素:const canvas = document.getElementById(‘myCanvas’);创建画笔:const ctx = canvas.getContext(‘2d’);canvas默认是透明的,如果不设置背景色,那么它就会被我设置的body纹理所覆盖,想要使其拥有背景色(白色),只有绘制矩形覆盖canvas这一个方法。

1:Draw a Line

  • moveTo(x, y)——确定Line的起始点。
  • lineTo(x, y)——确定Line的终止点。
  • lineWidth——设置或者返回当前Line width。
  • lineJoin——Sets or returns the type of corner created, when two lines meet
  • lineCap——Sets or returns the style of the end caps for a line

确定绘制

  • fill()——fills the current drawing (path)The default color is black.
  • stroke()——draws the path,The default color is black.
  • fillStyle——Sets or returns the color used to fill the drawing.
  • strokeStyle——Sets or returns the color used for strokes.

Example:

1
2
3
4
5
6
7
8
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.moveTo(100,100);
ctx.lineTo(300,300);
ctx.lineTo(100,500);
ctx.strokeStyle = "red";
ctx.stroke();

2:Draw a Rectangle

  • rect(x, y, width, height);
  • fillRect(x, y, width, height);
  • strokeRect(x, y, width, height); no fill
  • clearRect(x, y, width, height); Clears the specified pixels within a given rectangle

除了上面的那四个方法外,我们也可以使用下面这种方法:

1
2
3
4
5
6
7
context.beginPath();
context.moveTo(150,50);
context.lineTo(650,50);
context.lineTo(650,550);
context.lineTo(150,550);
context.lineTo(150,50); //最后一笔可以不画
context.closePath(); //注意:这里需要使用closePath()来闭合图形

3:Draw a Circle, or a part of circle

  • arc(x, y, r, sAngle, eAngle, counterclockwise):counterclockwise默认值为False,表示顺时针,True表示逆时针。
  • arcTo(x1, x2, x3, x4, r):用于创建两条切线之间的弧/曲线。arcTo

Example:

1
2
3
4
5
6
ctx.beginPath();
ctx.moveTo(20,20); // Create a starting point
ctx.lineTo(100,20); // Create a horizontal line
ctx.arcTo(150,20,150,70,50); // Create an arc
ctx.lineTo(150,120); // Continue with vertical line
ctx.stroke(); // Draw it