canvas基础笔记

一、简介

Canvas是HTML5中的一个元素，它提供了一个可以使用JavaScript绘制图形的区域。它提供了一个强大的绘图API，可以用于创建各种图形，包括线条、矩形、圆形、文本等

• Canvas 是 HTML5 中的一个元素，用于绘制图形、动画和图像。
• 它提供了一个画布，可以通过 JavaScript 来操作画布上的像素，实现各种绘图效果。

标签只有两个属性—— width 和 height，当没有设置宽度和高度的时候， 会初始化宽度为 300px 和高度为 150px。

需要注意的是， 通过 CSS 也可以定义 canvas 的尺寸，但此元素尺寸非彼画布尺寸，在绘制时图像会伸缩以适应它的画布尺寸；如果元素尺寸和画布尺寸比例不一样，绘制出来的图像是扭曲的。

只有同时通过 CSS 指定了 width 和 height，才会出现比例不一致，如果只定义 width: 400px，你会发现高度会自动变成 200px。

二、使用 Canvas

• 在 HTML 中，通过  标签来创建一个 Canvas 元素。
• 使用 JavaScript，可以通过获取 Canvas 元素的上下文对象来绘制图形。

• 1、创建Canvas元素

在HTML中，可以使用标签来创建一个Canvas元素。例如：

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

上面的代码创建了一个宽度为500像素，高度为300像素的Canvas元素，并指定了一个id为"myCanvas"。

• 获取Canvas元素：可以使用JavaScript的querySelector方法或者直接通过ID获取Canvas元素，并将其存储在一个变量中，方便后续操作。

var canvas = document.querySelector('#canvas');

• 2、获取Canvas上下文

canvas 起初是空白的，脚本首先需要找到渲染上下文，然后在它的上面绘制。Canvas元素需要一个上下文对象来进行绘制操作。在JavaScript中，可以使用getContext()方法来获取Canvas的上下文。上下文对象提供了一系列的绘图方法，可以用来绘制图形。例如：

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

上面的代码获取了id为"myCanvas"的Canvas元素，并通过getContext("2d")方法获取了一个2D上下文对象。

• 3、绘制形状

使用Canvas的上下文对象，可以绘制各种形状，如矩形、圆形、线条等。

• 使用 Canvas 的上下文对象的方法，如 fillRect()、strokeRect()、fillText() 等，可以绘制矩形、文本等基本图形。
• 这些方法接受不同的参数，如坐标、尺寸、颜色等，可以根据需求进行调整。
• 使用 Canvas 的上下文对象的方法，如 beginPath()、moveTo()、lineTo()、closePath() 等，可以绘制路径。
• 绘制路径可以实现更复杂的图形，如直线、曲线、多边形等。

• 以下是一些常用的绘制方法：

  • fillRect(x, y, width, height)：绘制填充的矩形。
  • strokeRect(x, y, width, height)：绘制边框的矩形。
  • clearRect(x, y, width, height)：清除指定矩形区域内的内容。
  • beginPath()：开始一个新的路径。
  • moveTo(x, y)：将绘图游标移动到指定的坐标。
  • lineTo(x, y)：绘制一条直线到指定的坐标。
  • arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制一段圆弧。
  • fill()：填充当前路径。
  • stroke()：绘制当前路径的边框。

// 绘制直线
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();
 
// 绘制矩形
ctx.fillRect(50, 50, 150, 100);
 
// 绘制圆形
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2 * Math.PI);
ctx.fill();

• 4、绘制文本

  使用Canvas的上下文对象，还可以绘制文本。canvas提供了一些方法来绘制文本，包括设置字体、字号和文本内容等以下是一些常用的绘制文本的方法：

  • font = "size font"：设置文本的字体大小和字体样式。
  • fillText(text, x, y)：绘制填充的文本。
  • strokeText(text, x, y)：绘制文本边框。
  • measureText(text)：返回一个包含文本宽度的对象。

•  5、设置样式和颜色

Canvas提供了一些方法来设置绘制的样式和颜色，如线条的宽度(lineWidth)、填充色(fillStyle)和边框色(strokeStyle)等。

// 设置线条宽度和颜色
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
 
// 设置填充色
ctx.fillStyle = '#FF0000';

• 6、绘制图像

  使用Canvas的上下文对象，可以绘制图像。

• 使用 Canvas 的上下文对象的方法，如 drawImage()，可以绘制图像。
• 可以加载图片，并在 Canvas 上绘制图片，还可以对图片进行缩放、剪切等操作。

• 以下是一些常用的绘制图像的方法：

  • drawImage(image, x, y)：绘制图像。
  • getImageData(x, y, width, height)：获取指定区域的图像数据。

• 7、动画

  使用Canvas，可以创建动画效果。常用的方法是使用requestAnimationFrame()函数来循环调用绘制代码，以实现动画效果。

• 使用 Canvas 和 JavaScript，可以实现动画效果。
• 可以使用 requestAnimationFrame() 方法来循环调用绘制函数，实现平滑的动画效果。

• 例如：

  function draw() {
    // 绘制代码
    requestAnimationFrame(draw);
  }
  draw();
  

  上面的代码定义了一个draw()函数，该函数会不断地被调用，从而实现动画效果。

• 8、清空画布

• 使用 Canvas 的上下文对象的方法，如 clearRect()，可以清空画布。
• 可以在每次绘制之前，先清空画布，然后再进行绘制，实现动态的效果。

ctx.clearRect(0, 0, canvas.width, canvas.height);

总结

• Canvas 是一个强大的绘图工具，可以实现各种图形、动画和图像的绘制。
• 通过学习 Canvas，可以掌握基本的绘图技巧，为网页设计和开发提供更多可能性。
• 通过学习这些知识，可以开始使用Canvas绘制各种图形、文本和图像，并创建动画效果。

那就先记录到这里叭！~其它的遇到了再补充啦！~