关于canvas的使用（超详细的canvas知识体系讲解）

大家好，欢迎来到IT知识分享网。

1. 关于canvas

1.1. 简介

1.1.1. 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

1.1.2. 它最初由苹果内部使用自己 MacOS X WebKit 推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过 Gecko 内核的浏览器 (尤其是 Mozilla和Firefox)，Opera 和 Chrome 和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

1.1.3. Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。

1.2. 注意事项

1.2.1. canvans是双标签

1.2.2. 如果不给 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 的宽高

1.2.3. 由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者浏览器不支持 HTML 元素 ，在这些浏览器上只能能展示替代内容。

2. canvas的基本使用

2.1. 渲染上下文

2.2. 检测支持性

2.3. 代码模板

<canvas id="tutorial" width="300" height="300"></canvas> <script type="text/javascript"> function draw(){ 
    var canvas = document.getElementById('tutorial'); if(!canvas.getContext) return; if(!canvas.getContext) return; ctx.fillStyle = "rgb(200,0,0)"; //绘制矩形 ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } draw(); </script> 

3. 图形绘制

3.1. 方法汇总

3.1.1. fillRect(x, y, width, height)：绘制一个填充的矩形

3.1.2. strokeRect(x, y, width, height)：绘制一个矩形的边框。

3.1.3. clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

4. 路径绘制

4.1. 基本步骤

4.1.1. 创建路径起始点

4.1.2. 调用绘制方法去绘制出路径

4.1.3. 把路径封闭

4.1.4. 一旦路径生成，通过描边或填充路径区域来渲染图形。

4.2. 方法汇总

4.2.1. beginPath()

4.2.2. moveTo(x, y)

4.2.3. closePath()

4.2.4. stroke()

4.2.5. fill()

4.2.6. lineTo(x,y)

4.2.7. arc(x, y, r, startAngle, endAngle, anticlockwise)

4.2.8. arcTo(x1, y1, x2, y2, radius)

4.3. 贝塞尔曲线

4.3.1. 一次贝塞尔曲线其实是一条直线

4.3.2. 二次贝塞尔曲线

4.3.3. 三次贝塞尔曲线

5. 样式&颜色

5.1. 基本方法

5.1.1. fillStyle = color 设置图形的填充颜色

5.1.2. strokeStyle = color 设置图形轮廓的颜色

5.1.3. Transparency(透明度) globalAlpha = transparencyValue

5.1.4. lineWidth=1

5.1.5. lineCap = type

5.1.6. lineJoin = type

5.2. 虚线

5.2.1. setLineDash() 方法

5.2.2. lineDashOffset 属性

5.2.3. getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组

6. 文本绘制

6.1. 基本方法

6.1.1. fillText(text, x, y [, maxWidth])

6.1.2. strokeText(text, x, y [, maxWidth])

6.2. 文本样式

6.2.1. font = value

6.2.2. textAlign = value

6.2.3. textBaseline = value

6.2.4. direction = value

7. 图片绘制

7.1. 注意

7.2. 绘制方法模板

<img src="图片路径" alt="" width="300"><br> <canvas id="tutorial" width="600" height="400"></canvas> function draw(){ 
    var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); var img = document.querySelector("img"); ctx.drawImage(img, 0, 0); } 

7.3. drawImage()方法详解

7.3.1. 基本绘制：drawImage(img,x,y)

7.3.2. 图片缩放：drawImage(image, x, y, width, height)

7.3.3. 切片：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

8. 状态的保存和恢复

8.1. 说明

8.2. save()方法

8.3. restore()

8.4. 一个例子

function draw(){ 
    var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形 ctx.save(); // 保存默认状态 ctx.fillStyle = 'red' // 在原有配置基础上对颜色做改变 ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形 ctx.save(); // 保存当前状态 ctx.fillStyle = '#FFF' // 再次改变颜色配置 ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形 ctx.restore(); // 重新加载之前的颜色状态 ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形 ctx.restore(); // 加载默认颜色配置 ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形 } draw(); 

9. 合成

9.1. 说明

9.2. 方法：globalCompositeOperation = type

9.2.1. 默认新图覆盖老图

9.2.2. source-in 仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)

9.2.3. source-out 仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示)

9.2.4. source-atop 新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。

9.2.5. destination-over 新图像会在老图像的下面

9.2.6. destination-in 仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。

例图：

9.2.7. destination-out 仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。

例图：

9.2.8. destination-atop 老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面

例图：

9.2.9. lighter 新老图像都显示，但是重叠区域的颜色做加处理。

例图：

9.2.10. darken 保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)

例图：

9.2.11. lighten 保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)

例图：

9.2.12. xor 重叠部分会变成透明。

例图：

9.2.13. copy 只有新图像会被保留，其余的全部被清除(变透明)。

例图：

10. 变形

10.1. 方法汇总(与css3基本相同)

10.1.1. translate(x, y)

10.1.2. rotate(angle)

10.1.3. scale(x, y)

11. 动画

11.1. 基本步骤

11.1.1. 清空 canvas 再绘制每一帧动画之前，需要清空所有。清空所有最简单的做法就是 clearRect() 方法。

11.1.2. 保存 canvas 状态 如果在绘制的过程中会更改 canvas 的状态(颜色、移动了坐标原点等),又在绘制每一帧时都是原始状态的话，则最好保存下 canvas 的状态

11.1.3. 绘制动画图形这一步才是真正的绘制动画帧

11.1.4. 恢复 canvas 状态如果你前面保存了 canvas 状态，则应该在绘制完成一帧之后恢复 canvas 状态。

11.2. 常用方法

11.2.1. setInterval()

11.2.2. setTimeout()

11.2.3. requestAnimationFrame()

11.3. 一个简单的小案例(动态代码雨效果)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { 
      margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <canvas id="bg"></canvas> <script> // 获取对象 const cvs = document.getElementById("bg"); // 设置canvas画布宽高 const width = window.innerWidth; const height = window.innerHeight; cvs.width = width; cvs.height = height; // 返回一个用于在画布上绘图的环境 const ctx = cvs.getContext("2d"); // 定义每列的宽度 const columnWidth = 20; // 生成的列数 const columnCount = Math.floor(window.innerWidth / columnWidth) // 创建数组 const columnNextIndexes = new Array(columnCount); // 全部用1填充 columnNextIndexes.fill(1); // 绘画 function draw() { 
      // 背景颜色 ctx.fillStyle = 'rgba(240,240,240,0.2)'; // fillRect(x1, y1, width, width) 画图形 ctx.fillRect(0, 0, width, height); // 设置颜色 ctx.fillStyle = getRandomColor(); const fz = 20; // 字体样式 ctx.font = `${ 
       fz}px Calibri`; for (let i = 0; i < columnCount; i++) { 
      // x坐标 const x = i * columnWidth; // y坐标 const y = fz * columnNextIndexes[i]; // 填充内容 ctx.fillText(getRandomChar(), x, y); // 判断是否超出可视范围 if (y > height && Math.random() > 0.99) { 
      columnNextIndexes[i] = 0; } else { 
      columnNextIndexes[i]++ } } } draw() setInterval(draw, 40) // 随机颜色 function getRandomColor() { 
      const fontColor = [ "#33b5e5", "#0099cc", "#aa66cc", "#9933cc", "#", "#ffbb33", "#ff8800", "#ff4444", "#cc0000" ] return fontColor[Math.floor(Math.random() * fontColor.length)] } // 随机字符 function getRandomChar() { 
      const str = "console.log('hello world')"; return str[Math.floor(Math.random() * str.length)] } </script> </body> </html>