Canvas学习记录

已于 2022-12-23 16:52:14 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： 笔记 文章标签： 学习 html 前端 Canvas
于 2022-12-23 16:32:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45286211/article/details/128420954
版权

Canvas学习


MDN官网Canvas2D

基本用法

1.首先得有canvas元素
<canvas id="tutorial" width="150" height="150"></canvas>

如果你绘制出来的图像是扭曲的，尝试用 width 和 height 属性为明确规定宽高，而不是使用 CSS。


2.获取渲染上下文

初始canvas是空白的，脚本要渲染图形就需要先找到渲染的上下文，可以通过getContext()这个方法获取渲染上下文和它的绘画功能。其接收一个参数，对于2D图形可以传入‘2d’来获取一个CanvasRenderingContext2D 实例。

let canvas = document.getElementById('tutorial');
let ctx = canvas.getContext('2d');

3.检查浏览器支持性
var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

4.例子
<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        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);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

绘制图形

画布左上角为坐标原点（0,0）

1.矩形

fillRect(x,y,width,height) // 起点坐标，宽高 填充

strokeRect(x,y,width,height) // 起点坐标，宽高 边框

clearRect(x,y,width,height) // 起点坐标，宽高 清除（区域变透明）


2. 绘制路径

二维空间(面)由一维线构成，在canvas画布中，图形也是由一条条(路径)线构成。于是有了以下几点。

  • 首先需要创建路径 beginPath()
  • 使用画图命令去画路径 moveTo()起点、lineTo()连线(联结上一个点到下一个点)等等
  • 封闭路径(非必需) closePath()
  • 通过描边或填充路径区域来渲染图形 fill()填充 / stroke()描边

1. 当前路径为空，即调用 beginPath() 之后，或者 canvas 刚建的时候，第一条路径构造命令通常被视为是 moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

2. 当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。


3. 移动笔触

moveTo(x,y)

将笔触移动到指定的坐标 (x, y) 上。

当 canvas 初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。就像拿着画笔在白纸上画画，每次落笔到纸上时，都有一个点是最先接触到笔的，然后才是画线，所以每次画完一条线(提起笔)，再画另一条线时都需要使用moveTo(都有一个点最先接触笔)。moveTo完成的功能可以看作是从上一个终点提笔，到新的点落笔。如下面的笑脸


4. 绘制直线

lineTo(x,y)

绘制一条从当前位置到(x,y)的直线。

lineTo可以连续使用，这时下一段线的开始点就是上一段线的结束点，可以使用moveTo改变开始点


5. 圆弧

绘制圆弧或者圆，我们使用arc()方法。当然可以使用arcTo()，不过这个的实现并不是那么的可靠，所以我们这里不作介绍。

arc(x,y,radius,startAngle,endAngle,anticlockwise)

以x,y为圆心radius为半径画圆弧(圆)，startAngle与endAngle分部代表起始弧度与结束弧度，anticlockwise是一个boolean，true:逆时针，false:顺时针

arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
在这里插入图片描述

弧度=(Math.PI/180)*角度。

二次贝塞尔曲线与三次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y 为一个控制点，x,y 为结束点。

    ctx.beginPath();
    ctx.moveTo(75, 25);
    ctx.quadraticCurveTo(25, 25, 25, 62.5);
    ctx.quadraticCurveTo(25, 100, 50, 100);
    ctx.quadraticCurveTo(50, 120, 30, 125);
    ctx.quadraticCurveTo(60, 120, 65, 100);
    ctx.quadraticCurveTo(125, 100, 125, 62.5);
    ctx.quadraticCurveTo(125, 25, 75, 25);
    ctx.stroke();

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fill();

Path2D 对象

正如我们在前面例子中看到的，你可以使用一系列的路径和绘画命令来把对象“画”在画布上。为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。

创建Path2D对象
new Path2D();     // 创建一个path2D对象
new Path2D(path); // 创建一个path对象的拷贝
new Path2D(d);    // d为svg path数据构成的字符串，根据svg命令创建路径

// 例1：
    var path1 = new Path2D();
    path1.rect(10, 10, 100,100);
    
    var path2 = new Path2D(path1);
    path2.moveTo(220, 60);
    path2.arc(170, 60, 50, 0, 2 * Math.PI);
    
    ctx.stroke(path2);
  
// 例2：
    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
    
// 例3：
    var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
    ctx.fill(p);

Path2D.addPath()

Path2D.addPath() 是 Canvas 2D API 根据指定路径变量添加路径的方法

语法

void path.addPath(path [, transform]);

path: 需要添加的 Path2D路径

transform(可选)：SVGMatrix作为新增路径的变换矩阵。（已弃用，可用DOMMatrix与DOMMatrixReadOnly接口来代替，但是某些浏览器并不支持，并且未可能重新修订标准）


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

// Create a new path with a rect
var p1 = new Path2D();
p1.rect(0,0,100,100);

// Create another path with a rect
var p2 = new Path2D();
p2.rect(0,0,100,100);

// Create transformation matrix that moves vertically 300 points to the right
var m = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 300; m.f = 0;

// add the second path to the first path
p1.addPath(p2, m);

// Finally, fill the first path onto the canvas
ctx.fill(p1);

使用样式和颜色

色彩Colors

fillStyle = color/gradient/pattern 设置图形的填充颜色
strokeStyle = color/gradient/pattern 设置图形轮廓的颜色

  • DOMString字符串，可以转化为CSS颜色值 (‘red’,#fdfdfd,rgb(0,0,244)等）

  • CanvasGradient对象，（线性渐变或放射性渐变）更多见下文“渐变 Gradients"模块

  • CanvasPattern对象（可重复的图片、视频等）见下文“图案样式 Patterns”模块

    for (var i=0;i<6;i++){
        for (var j=0;j<6;j++){
            ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                            Math.floor(255-42.5*j) + ')';
            ctx.fillStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                            Math.floor(255-42.5*j) + ')';
            ctx.beginPath();
            ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
            ctx.stroke();
            ctx.fill();
        }
    }
    ctx.strokeStyle = "red";
    ctx.strokeRect(0, 0, 150, 150);

在基于 WebKit- 和 Blink- 的浏览器中，还有两个非标准且不赞成使用的方法，可能在之后的版本中删除

ctx.setStrokeColor()、ctx.setFillColor()


透明度 Transparency

除了可以绘制实色图形，我们还可以用 canvas 来绘制半透明的图形。通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式

globalAlpha = transparencyValue

  1. globalAlpha = 0.5 （0.0~1.0，默认1.0）
  2. ctx.strokeSytle = "rgba(255,0,0,.5)"; 、ctx.fillSytle = "rgba(255,0,0,.5)";
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
//ctx.globalAlpha = 0.8
ctx.fillStyle = "rgba(255,0,0,.5)";
ctx.fillRect(50, 50, 100, 100);

globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。其他情况使用第二种更灵活。

两种例子：

//1. globalAlpha 
  var ctx = document.getElementById('canvas').getContext('2d');
  // 画背景
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0,0,75,75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75,0,75,75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0,75,75,75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75,75,75,75);
  ctx.fillStyle = '#FFF';

  // 设置透明度值
  ctx.globalAlpha = 0.2;

  // 画半透明圆
  for (var i=0;i<7;i++){
      ctx.beginPath();
      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
      ctx.fill();
  }
//2.rgba  
  ctx.fillStyle = 'rgb(255,221,0)';
  ctx.fillRect(0,0,150,37.5);
  ctx.fillStyle = 'rgb(102,204,0)';
  ctx.fillRect(0,37.5,150,37.5);
  ctx.fillStyle = 'rgb(0,153,255)';
  ctx.fillRect(0,75,150,37.5);
  ctx.fillStyle = 'rgb(255,51,0)';
  ctx.fillRect(0,112.5,150,37.5);

  // 画半透明矩形
  for (var i=0;i<10;i++){
    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
    for (var j=0;j<4;j++){
      ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
    }
  }

线型 Line styles

lineWidth = value 设置线宽度（仅限正数，0、负数、Infinity、NaN会被忽略）

ctx.lineWidth = 15;

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();

lineCap = type 设置线的末端属性 butt：方形 | round：以lineWidth/2为半径的半圆结束 | square：以lineWidth/2为长度的方形结尾

ctx.lineWidth = 15;
ctx.beginPath();

ctx.moveTo(30,0);
ctx.lineCap = "square";
ctx.lineTo(30, 100);
ctx.stroke();

ctx.moveTo(60,0);
ctx.lineCap = "round";
ctx.lineTo(60, 100);
ctx.stroke();

ctx.moveTo(90,0);
ctx.lineCap = "butt";
ctx.lineTo(90, 100);
ctx.stroke();

lineJoin = value 设定线条与线条间接合处的样式 bevel：连接处外角为直线 | round：连接处外角为圆弧 | miter（默认）：连接处外角为尖角

注意：如果 2 个相连部分在同一方向，那么 lineJoin 不会产生任何效果，因为在那种情况下不会出现连接区域。

ctx.lineWidth = 50;
ctx.lineJoin = "miter"; // bevel  round
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200, 100);
ctx.lineTo(500,0);
ctx.stroke();

miterLimit = value 斜接面限制比例的的数字（仅限正数，0、负数、Infinity、NaN会被忽略）

此属性只有在ctx.lineJoin 为 ‘miter’时才会生效，生效范围内连接处的外角以bevel的形式“】”显示。（此属性存在的原因是，miter模式下，边角内角越小，外角长度就会越长，这时就可以设置边角长度的“阈值”）

例子：可以发现，随着内角越来越小，斜接（外角伸出部分）就越长，超过“阈值”就变为bevel格式了。

    canvas.width = 5000;
    canvas.height = 5000;
    var ctx = canvas.getContext('2d')
    ctx.beginPath();
    ctx.lineWidth = 20;
    ctx.lineJoin = 'miter'
    ctx.miterLimit = 20
    ctx.moveTo(0,400);
    for (var i=0;i<30;i++){
        if(i%2==0){
            ctx.lineTo((i+1)*40,400-(i+1)*20)
        }else{
            ctx.lineTo((i+1)*40,400+(i+1)*20)
        }
        
        ctx.stroke();
    }

setLineDash(segments) 设置填充线时使用虚线模式。参数为一组来指定描述模式的线和间隙的交替长度的Array数组，数组的元素如果是奇数个，那么会复制并重复元素。如[1,2,3] 会变成 [1,2,3,1,2,3]

  ctx.setLineDash([]);  // 实线
  ctx.setLineDash([1,1])  // 实1虚1   重复
  ctx.setLineDash([1,2,3]) // 实1虚2实3虚1实2虚3    重复

getLineDash() 获取当前填充线模式的格式数组

lineDashOffset = value 设置虚线偏移量的属性。可以实现蚂蚁线效果。value是一个float精度的值。

var offset = 0;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

渐变 Gradients

像一般的绘图软件一样，我们可以用线性或者径向的渐变来填充或描边。我们用下面的方法新建一个 canvasGradient 对象，并且赋给图形的 fillStyle 或 strokeStyle 属性。

使用ctx.createLinearGradient()或者ctx.createRadialGradient()创建

let gradient = ctx.createLinearGradient(x0,y0,x1,y1) 线性 x0,y0,开始点的坐标；x1,y1结束点的坐标

let gradient = ctx.createRadialGradient(x0,y0,r0,x1,y1,r1) 放射性 x0,y0,r0 开始圆的坐标、半径；x1,y1,r1 结束圆的坐标、半径

gradient.addColorStop(offset, color) 方法，添加一个由偏移值和颜色值指定的断点到渐变。 offset偏移值[0,1]，color颜色

// 线型
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"white");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,200,100);

// 放射型
var gradient = ctx.createRadialGradient(100,100,100,100,100,10);
gradient.addColorStop(0,"white");
gradient.addColorStop(0.5,"green");
gradient.addColorStop(1,"yellow");
ctx.fillStyle = gradient;
ctx.fillRect(0,0,200,200);

图案样式 Patterns

使用ctx.createPattern()创建

CanvasPattern ctx.createPattern(image, repetition); image是图像源（包括img,video,canvas,ctx,ImageBitmap,ImageData,Blob），repetition是指定图像如何重复取值：repeat,repeat-x,repeat-y,no-repeat（‘’,null默认repeat）

用 canvas 对象作为 Image 参数在 Firefox 1.5 (Gecko 1.8) 中是无效的。

与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0,0,400,400);
};

阴影 Shadows

shadowOffsetX = float shadowOffsetY = float

shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0

shadowBlur = float

shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。

shadowColor = float

shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);

Canvas 填充规则

ctx.fill、ctx.clip、ctx.isPointinPath 都可以选择一个填充规则。该填充规则根据某处在路径的外面或者里面来决定该处是否被填充，这对于自己与自己路径相交或者路径被嵌套的时候是有用的。

nonzero 非零环绕规则 若环绕数非零则表示在多边形内部，否则在外部

多边形的边变为矢量(有方向)。从点的位置发射一条射线，定一个多边形线条方向为正(向左)，则另一个方向为负(向右)，射线穿过正线+1，穿过负线-1，计算完射线穿过的所有边最终和为0 则表示在外部，非零表示在内部。

evenodd 奇偶规则 奇数表示在多边形内部，偶数表示在多边形外部。

从点的位置发射一条射线，穿过多边形所有边，如果穿过的此时是奇数则表示在内部，偶数表示在外部。

以上两个规则都是描述平面中点与(自相交)多边形之间的内外关系。传送门

在这里插入图片描述


  ctx.beginPath();
  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
  ctx.fill("evenodd");

绘制文本

绘制文本

fillText(text, x, y [, maxWidth]) 更多 在(x,y)处填充text内容，最大宽度maxWidth可选

strokeText(text, x, y [, maxWidth]) 更多 在(x,y)处绘制text边框，最大宽度maxWidth可选

ctx.font = "50px serif";
ctx.strokeText("Hello world", 50, 50);
ctx.fillText("Hello world", 50, 100);

有样式的文本

font = value 字符串使用 与 css font 属性相同的语法，默认为：10px sans-serif

`ctx.font = "bold 48px serif"`

textAlign = value 文本对齐选项 [start, end, left, right, center] 默认 start

textBaseline = value 基线对齐选项 [top, hanging, middle, alphabetic, ideographic, bottom] 默认 alphabetic

direction = value 文本方向 [ltr, rtl, inherit] 默认是inherit

direction 属性会对 textAlign 属性产生影响。如果 direction 属性设置为 ltr，则 left 和 start 的效果相同，right 和 end 的效果相同；如果 direction 属性设置为 rtl，则 left 和 end 的效果相同，right 和 start 的效果相同。


预测量文本宽度

measureText( text ) 传入一个文本，返回一个对象(包涵宽度、所在像素等等文本的属性）


使用图像 Using Images

获得需要绘制的图片

HTMLImageElement 这些图片是由Image()函数构造出来的，或者任何元素

HTMVideoElement 使用html 元素作为图片源，从视频中抽取帧画图。

HTMLCanvas 使用另一个 元素作为图片源

ImageBitmap 高性能位图，可以低延迟地绘制，可以从上面的源或其他源中生成

以上源统一由 CanvasImageSource 类型来引用


使用相同页面内的图片

使用其他域名下的图片

在HTMLImageElement 上使用 crossOrigin属性（取值：anonymous | use-credentials | “”，“”与anonymous相同），默认情况下crossOrigin不会启用。

如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染 canvas，否则，使用这个图片将会污染 canvas。


使用其他canvas元素

和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。

一个常用的应用就是将第二个 canvas 作为另一个大的 canvas 的缩略图。


由零开始创建图像

脚本中使用Image() 函数可以很方便的创建HTMLImageElement对象

var img = new Image();   // 创建一个<img>元素
img.src = 'myImage.png'; // 设置图片源地址

当脚本执行后，图片开始装载。

若调用drawImage时，图片还没装载完，那么什么都不会发生（一些就浏览器会抛出异常）。因此应该使用load事件来保证不会在加载完毕之前使用这个图片

var img = new Image();   // 创建 img 元素
img.onload = function(){
  // 执行 drawImage 语句
}
img.src = 'myImage.png'; // 设置图片源地址

如果多张图片，要是用一些预加载策略。

var imgData = ['src1','src2','src3']
var promiseAll = imgData.map(function (item, index) {
    return new Promise(function (resolve, reject) {
      var img = new Image();
      img.onload = function () {
        img.onload = null;
        resolve(img);
      };
      img.error = function () {
        reject('图片加载失败');
      };
      img.src = item;
    });
  });
  Promise.all(promiseAll).then(
    function () {
      // 图片全部加载完成，进行下一步
      // todo
    },
    function (err) {
      console.log(err);
    }
  );

/*作者：代码星空
链接：https://juejin.cn/post/6844903760695656455
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。*/

通过data:url 方式嵌入图像

我们还可以通过 data:url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。

img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

其优点就是图片内容即时可用，无须再到服务器兜一圈。（还有一个优点是，可以将 CSS，JavaScript，HTML 和 图片全部封装在一起，迁移起来十分方便。）缺点就是图像没法缓存，图片大的话内嵌的 url 数据会相当的长：


使用视频帧

你还可以使用 中的视频帧（即便视频是不可见的）。例如，如果你有一个 ID 为“myvideo”的 元素，你可以这样做：

function getMyVideo() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

绘制图片

一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态，下面是最基础的一种。

drawImage(image, x, y) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

== SVG 图像必须在 根指定元素的宽度和高度。== 

  var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    }
    img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';

缩放 Scaling

drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。

drawImage(image, x, y, width, height) 这个方法多了 2 个参数：width 和 height，这两个参数用来控制 当向 canvas 画入时应该缩放的大小

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    for (var i=0;i<4;i++){
      for (var j=0;j<3;j++){
        ctx.drawImage(img,j*50,i*38,50,38);
      }
    }
  };
  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
}

注意:如果图片中有文字最好不要缩放


切片 Slicing

drawImage 方法的第三个也是最后一个变种有 8 个新参数，用于控制做切片显示的。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它 8 个参数最好是参照右边的图解，前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

切片是个做图像合成的强大工具

<html>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
   <div style="display:none;">
     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
   </div>
 </body>
</html>

function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  // Draw slice
  ctx.drawImage(document.getElementById('source'),
                33,71,104,124,21,20,87,104);

  // Draw frame 
  ctx.drawImage(document.getElementById('frame'),0,0);
}

官网给的例子，frame图片是中空的，所以放在后面，如不是，则需要frame打底，否则小的图会被大的图遮住。


控制图像的缩放行为 Controlling image scaling behavior

如同前文所述，过度缩放图像可能会导致图像模糊或像素化。您可以通过使用绘图环境的imageSmoothingEnabled属性来控制是否在缩放图像时使用平滑算法。默认值为true，即启用平滑缩放。您也可以像这样禁用此功能：

ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

变形 Transformations

变形是一种更强大的方法，可以将原点移动到另一点、对画布网格进行旋转和缩放。

状态的保存和恢复 Saving and restoring state

save() 保存画布的所有状态(快照)

  • 当前的变换矩阵。
  • 当前的剪切区域。
  • 当前的虚线列表。
  • 以下属性当前的值： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.

restore() 弹出栈顶保存的状态

  • 当前应用的变形（即移动，旋转和缩放，见下）
  • 以及下面这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled
  • 当前的裁切路径（clipping path），会在下面介绍

Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。可以调用任意多次 save方法。每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。

  ctx.fillRect(0,0,150,150);   // 使用默认设置绘制一个矩形
  ctx.save();                  // 保存默认状态

  ctx.fillStyle = '#09F'       // 在原有配置基础上对颜色做改变
  ctx.fillRect(15,15,120,120); // 使用新的设置绘制一个矩形

  ctx.save();                  // 保存当前状态
  ctx.fillStyle = '#FFF'       // 再次改变颜色配置
  ctx.globalAlpha = 0.5;
  ctx.fillRect(30,30,90,90);   // 使用新的配置绘制一个矩形

  ctx.restore();               // 重新加载之前的颜色状态
  ctx.fillRect(45,45,60,60);   // 使用上一次的配置绘制一个矩形

  ctx.restore();               // 加载默认颜色配置
  ctx.fillRect(60,60,30,30);   // 使用加载的配置绘制一个矩形

移动 Translating

translate(x, y) 移动原点到（x，y）处

在做变形之前先保存状态是一个良好的习惯。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
      ctx.save();
      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
      ctx.translate(10 + j * 50, 10 + i * 50);
      ctx.fillRect(0, 0, 25, 25);
      ctx.restore();
    }
  }
}

旋转 Rotating

rotate(angle) 旋转angle角度。单位是弧度，正顺负逆

旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate方法。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.translate(75,75);

  for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

    for (var j=0;j<i*6;j++){ // draw individual dots
      ctx.rotate(Math.PI*2/(i*6));
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
      ctx.fill();
    }

    ctx.restore();
  }
}

缩放 Scaling

scale(x, y) 缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比 1 小，会缩小图形，如果比 1 大会放大图形。默认值为 1，为实际大小。

画布初始情况下，是以左上角坐标为原点的第一象限。如果参数为负实数，相当于以 x 或 y 轴作为对称轴镜像反转（例如，使用translate(0,canvas.height); scale(1,-1); 以 y 轴作为对称轴镜像反转，就可得到著名的笛卡尔坐标系，左下角为原点）。

默认情况下，canvas 的 1 个单位为 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // draw a simple rectangle, but scale it.
  ctx.save();
  ctx.scale(10, 3);
  ctx.fillRect(1, 10, 10, 10);
  ctx.restore();

  // mirror horizontally
  ctx.scale(-1, 1);
  ctx.font = '48px serif';
  ctx.fillText('MDN', -135, 120);
}

变形 Transforms

transform(a, b, c, d, e, f) 这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵

变换矩阵的描述： [ a c e b d f 0 0 1 ] \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1\\ \end{bmatrix} ​ab0​cd0​ef1​ ​

如果任意一个参数是Infinity，变形矩阵也必须被标记为无限大，否则会抛出异常。

a(m11) 水平缩放 b(m12) 垂直倾斜 c(m21) 水平倾斜

d(m21) 垂直缩放 e(dx) 水平移动 f(dy) 垂直移动

ctx.transform(1,0.5,-0.5,1,100,20);
ctx.fillRect(0,0,100,100);
ctx.setTransform();

transform 重复使用会相对上次的transform进行变换

setTransform 重复使用只会相对于同一个原型变换(默认坐标原点在canvas左上角)进行变换

setTransform(a, b, c, d, e, f)

这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。从根本上来说，该方法是取消了当前变形，然后设置为指定的变形，一步完成。

resetTransform() 重置当前变形为单位矩阵，功能等同：ctx.setTransform(1, 0, 0, 1, 0, 0);

transform/setTransform 例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  var sin = Math.sin(Math.PI/6);
  var cos = Math.cos(Math.PI/6);
  ctx.translate(100, 100);
  var c = 0;
  for (var i = 0; i <= 12; i++) {
        c = Math.floor(234 / 12 * i);
        ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
        ctx.fillRect(0, 0, 100, 10);
        ctx.transform(cos, sin, -sin, cos, 0, 0); // 相对上一次的transform变换进行变换
        // ctx.setTransform(1, 0, 0, 1, 10*i, 10*i);  // 相对左上角原型变换
    }
    
    ctx.setTransform(-1, 0, 0, 1, 100, 100);
    ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
    ctx.fillRect(0, 50, 100, 100);
}

组合 Compositing

在之前的例子里面，我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。比如，对合成的图形来说，绘制顺序会有限制。不过，我们可以利用 globalCompositeOperation 属性来改变这种状况。此外，clip属性允许我们隐藏不想看到的部分图形。

globalCompositeOperation

我们不仅可以在已有图形后面再画新图形，还可以用来遮盖指定区域，清除画布中的某些部分（清除区域不仅限于矩形，像clearRect()方法做的那样）以及更多其他操作。

globalCompositeOperation = type 这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识 12 种遮盖方式的字符串。（注意看左上方红蓝结合的方块）

  • source-over

    这是默认设置，并在现有画布上下文之上绘制新图形。
    在这里插入图片描述

  • source-in

    新图形只在新图形和目标画布重叠的地方绘制。其他的都是透明的。
    在这里插入图片描述

  • source-out

    在不与现有画布内容重叠的地方绘制新图形。
    在这里插入图片描述

  • source-atop

    新图形只在与现有画布内容重叠的地方绘制。

  • destination-over

    在现有的画布内容后面绘制新的图形。

  • destination-in

    现有的画布内容保持在新图形和现有画布内容重叠的位置。其他的都是透明的

  • destination-out

    现有内容保持在新图形不重叠的地方。

  • destination-atop

    现有的画布只保留与新图形重叠的部分，新的图形是在画布内容后面绘制的。

  • lighter

    两个重叠图形的颜色是通过颜色值相加来确定的。

  • copy

    只显示新图形。

  • xor

    图像中，那些重叠和正常绘制之外的其他地方是透明的。

  • multiply

    将顶层像素与底层相应像素相乘，结果是一幅更黑暗的图片。

  • screen

    像素被倒转，相乘，再倒转，结果是一幅更明亮的图片。

  • overlay

    multiply 和 screen 的结合，原本暗的地方更暗，原本亮的地方更亮。

  • darken

    保留两个图层中最暗的像素。

  • lighten

    保留两个图层中最亮的像素。
    在这里插入图片描述

  • color-dodge

    将底层除以顶层的反置。

  • color-burn

    将反置的底层除以顶层，然后将结果反过来。

  • hard-light

    屏幕相乘（A combination of multiply and screen）类似于叠加，但上下图层互换了。

  • soft-light

    用顶层减去底层或者相反来得到一个正值。

  • difference

    一个柔和版本的强光（hard-light）。纯黑或纯白不会导致纯黑或纯白。

  • exclusion

    和 difference 相似，但对比度较低。

  • hue

    保留了底层的亮度（luma）和色度（chroma），同时采用了顶层的色调（hue）

  • stauration

    保留底层的亮度（luma）和色调（hue），同时采用顶层的色度（chroma）。

  • color

    保留了底层的亮度（luma），同时采用了顶层的色调 (hue) 和色度 (chroma)。

  • luminosity

    保持底层的色调（hue）和色度（chroma），同时采用顶层的亮度（luma）。


剪切路径

裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏不需要的部分。如右图所示。红边五角星就是裁切路径，所有在路径以外的部分都不会在 canvas 上绘制出来。

如果和上面介绍的 globalCompositeOperation 属性作一比较，它可以实现与 source-in 和 source-atop差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。

在 绘制图形 一节中，介绍了 stroke 和 fill 方法，这里介绍第三个方法clip。

clip() 将当前正在构建的路径转换为当前的裁剪路径

ctx.arc(100, 100, 75, 0, Math.PI*2, false);
ctx.clip();
ctx.fillRect(0, 0, 100,100);


基本动画

动画的基本步骤
  1. 清空canvas，除非接下来画的内容会充满canvas（如背景图），否则需要清空所有。最简单就是使用clearRect()。
  2. 保存canvas状态，如果要改变一些会改变canvas状态的设置（样式、变形之类的），又要在每一帧之时都是原始状态的话，需要先保存一下状态。
  3. 绘制动画图形（animated shapes）这一步才是重绘动画帧。
  4. 恢复canvas状态，如果已经保存了canvas的状态，可以先恢复它，然后重绘下一帧。

操控动画 Controlling an animation

在canvas上绘制内容是用canvas提供的或自定义的方法，而通常绘制结果都在脚本执行完之后，所以使用for循环来完成动画是不太可能的。

因此为了实现动画，我们需要一些可以定时执行重绘的方法。 首先可以通过setInterval和setTimeout方法来控制在设定的时间点上执行重绘。

更多动画见官网


计划更新 Scheduled updates

首先，可以用window.setInterval(),window.setTimeout(),和window.requestAnimationFrame()来设定定期执行一个指定函数。

setInterval(function, delay) function 更具设置的时间(delay) 定期执行（宏任务）

setTimeout(function, delay) function 在设置的时间(delay)之后执行（宏任务）

requestAnimationFrame(callback) 跟随浏览器的刷新帧率，在下次浏览器重绘时调用回调函数更新动画（如果需要形成动画，需要在回调函数中再次调用window.requestAnimationFrame()。）


高级动画

基本动画以及逐步了解了让物件移动的方法。在这一部分，我们将会对运动有更深的了解并学会添加一些符合物理的运动以让我们的动画更加高级。

绘制小球

我们将会画一个小球用于动画学习，所以首先在画布上画一个球。下面的代码帮助我们建立画布。

<canvas id="canvas" width="600" height="300"></canvas>

跟平常一样，我们需要先画一个 context（画布场景）。为了画出这个球，我们又会创建一个包含一些相关属性以及 draw() 函数的 ball 对象，来完成绘制。

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

var ball = {
  x: 100,
  y: 100,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

ball.draw();

这里并没有什么特别的。小球实际上是一个简单的圆形，在arc() 函数的帮助下画出。


添加速率

现在我们有了一个小球，正准备添加一些基本动画，正如我们上一章所学的。又是这样，window.requestAnimationFrame(） 再一次帮助我们控制动画。小球依旧依靠添加速率矢量进行移动。在每一帧里面，我们依旧用clear 清理掉之前帧里旧的圆形。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener('mouseover', function(e){
  raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener('mouseout', function(e){
  window.cancelAnimationFrame(raf);
});

ball.draw();
边界

若没有任何的碰撞检测，我们的小球很快就会超出画布。我们需要检查小球的 x 和 y 位置是否已经超出画布的尺寸以及是否需要将速度矢量反转。为了这么做，我们把下面的检查代码添加进 draw 函数：

if (ball.y + ball.vy + ball.radius > canvas.height || ball.y + ball.vy < ball.radius) {
            ball.vy = -ball.vy;
        }
        if (ball.x + ball.vx + ball.radius > canvas.width || ball.x + ball.vx < ball.radius) {
            ball.vx = -ball.vx;
        }
加速度

为了让动作更真实，你可以像这样处理速度，例如：

ball.vy *= .99;
ball.vy += .25;

这会逐帧减少垂直方向的速度，所以小球最终将只会在地板上弹跳。

长尾效果

现在，我们使用的是 clearRect 函数帮我们清除前一帧动画。若用一个半透明的 fillRect 函数取代之，就可轻松制作长尾效果。

ctx.fillStyle = 'rgba(255,255,255,0.3)';
ctx.fillRect(0,0,canvas.width,canvas.height);
添加鼠标控制

为了更好地控制小球，我们可以用 mousemove事件让它跟随鼠标活动。下面例子中，click 事件会释放小球然后让它重新跳起。

canvas.addEventListener('click',function(e){
  if (!running) {
    raf = window.requestAnimationFrame(draw);
    running = true;
  }
});

canvas.addEventListener('mouseout', function(e){
  window.cancelAnimationFrame(raf);
  running = false;
});
最终效果
    var ctx = document.getElementById('canvas').getContext('2d');
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var raf;
    var running = false;
    let queue = {
        list: [],   
        length: function(){return this.list.length},
        set: function(item){
            if(this.list.length > 99) this.list.pop();    // 超过10条就去掉队尾数据
            this.list.unshift(item);    // 新数据插入头部
        },
        pop: function(){
            if(this.list.length>0) return this.list.pop();
        }
    }
    var ball = {
        x: 100,
        y: 100,
        vx: 2,
        vy: 2,
        radius: 25,
        shadow: queue,
        color: 'red',
        draw: function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fillStyle = this.color;
            ctx.fill();
        }
    };
    function clear() {
        ctx.fillStyle = 'rgba(255,255,255,0.3)';
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }

    function draw() {
        // ctx.clearRect(0, 0, canvas.width, canvas.height);    
        // 换成长尾效果
        clear();  
        ball.draw();
        ball.x += ball.vx;
        ball.y += ball.vy;
        ball.shadow.set({...ball})
        // ball.vy += .5   // 加速度
        // ball.vx *= .99
        if (ball.y + ball.vy + ball.radius > canvas.height || ball.y + ball.vy < ball.radius) {
            ball.vy = -ball.vy;
        }
        if (ball.x + ball.vx + ball.radius > canvas.width || ball.x + ball.vx < ball.radius) {
            ball.vx = -ball.vx;
        }
        raf = window.requestAnimationFrame(draw);
    }

    function run(){
        if (!running) {
            raf = window.requestAnimationFrame(draw);
            // running = true;
        }else{
            window.cancelAnimationFrame(raf);
            let shadow = ball.shadow;
            runderShadow(shadow); 
        }
        running = !running
    }
    function runderShadow(shadow){
        let {list} = shadow
        let frequence = 1;
        for (let i = 20; i > 0; i--) {
            const item = list[i];
            frequence++;
            setTimeout(() => {
                item.color = 'rgba(255,255,255,0.6)'
                item.radius += 1
                item.draw();
                ball.draw();
            }, 50 * frequence);
        }
        frequence = 1;
        for (let i = list.length-1; i > 20; i--) {
            const item = list[i];
            frequence++;
            setTimeout(() => {
                item.color = 'rgba(255,255,255,1)'
                item.radius += 1
                item.draw();
                ball.draw();
            }, 1 * frequence);
        }
        frequence = 1;
        for (let i = 20; i > 0; i--) {
            const item = list[i];
            frequence++;
            setTimeout(() => {
                item.radius += 1
                item.color = 'rgba(255,255,255,1)'
                item.draw();
                ball.draw();
            }, 25 * frequence);
        }
    }
    
    canvas.addEventListener('mousemove', function (e) {
        if (!running) {
            clear();
            ball.x = e.offsetX;
            ball.y = e.offsetY;
            ball.draw();
        }
    });
    
    canvas.addEventListener('click', run);
    
    window.addEventListener('keydown', (event)=>{
        switch(event.keyCode){
        case 32:    // 空格
            run();break;
        case 38: // up y轴加速
            if(ball.vy >= 0){
                ball.vy += 2   // 加速度
            }else{
                ball.vy -= 2   // 反向加速度
            }break;
        case 40: // down y轴减速
            if(ball.vy >= 0){
                ball.vy -= 2   // 减加速度
            }else{
                ball.vy += 2   // 反向减加速度
            }break;
        case 39: // right x轴加速
            if(ball.vx >= 0){
                ball.vx += 2   // 加速度
            }else if(ball.vx-2 == 0){
                ball.vx -= 2   // 反向加速度
            }break;
        case 37: // left x轴减速
            if(ball.vx >= 0){
                ball.vx -= 2   // 减加速度
            }else if(ball.vx+2 == 0){
                ball.vx += 2   // 反向减加速度
            }
        }
    })

    // canvas.addEventListener('mouseover', function(e){
    //     raf = window.requestAnimationFrame(draw);
    // });

    canvas.addEventListener('mouseout', function (e) {
        window.cancelAnimationFrame(raf);
        // 移出重置x、y轴速率
        ball.vy = 2;
        ball.vx = 5;
        running = false;
    });
    window.addEventListener("beforeunload", function( event ) {
        event.returnValue = "\o/";
        // event.returnValue = "\n/";
        // event.preventDefault();

        /*https://developer.mozilla.org/zh-CN/docs/Web/API/BeforeUnloadEvent*/
    });

    ball.draw();

像素操作

到目前为止，我们尚未深入了解 Canvas 画布真实像素的原理，事实上，你可以直接通过 ImageData 对象操纵像素数据，直接读取或将数据数组写入该对象中。稍后我们也将深入了解如何控制图像使其平滑（反锯齿）以及如何从 Canvas 画布中保存图像。

ImageData对象

ImageData对象中存储着canvas对象真实的像素数据，其包含以下几个只读属性：

width 图片宽度，单位是像素

height 图片高度，单位是像素

data Uint8ClampedArray 类型的一维数组，包含着 RGBA 格式的整型数据，范围在 0 至 255 之间（包括 255）。

data 属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用 4 个 1bytes 值 (按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用 0 至 255 来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引 0 位置。像素从左到右被处理，然后往下，遍历整个数组。

Uint8ClampedArray 包含高度 × 宽度 × 4 bytes 数据，索引值从 0 到 (高度× 宽度 ×4)-1

如，要读取图片中位于第 50 行，第 200 列的像素的蓝色部份，你会写以下代码：

blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];

根据行、列读取某像素点的 R/G/B/A 值的公式：

imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 0/1/2/3];

你可能用会使用 Uint8ClampedArray.length 属性来读取像素数组的大小（以 bytes 为单位）：

var numBytes = imageData.data.length;

创建一个ImageData对象

去创建一个新的，空白的ImageData对象，可以使用createImageData(）方法。

var myImageData = ctx.createImageData(widht,height);

上面的代码创建了一个宽为width、高为height的空白ImageData对象，此时所有的rgba颜色值都是0。因此是一个透明黑的效果。

var myImageData = ctx.createImageData(anotherImageData);

上面的代码创建了一个被anotherImageData对象指定的相同像素的ImageData对象。这个新对象全部被预设为透明黑（rgba(0,0,0,0)）。这并非复制了图片数据


得到场景像素数据

为获得一个包含画布场景像素数据的ImageData对象，可以使用getImageData()方法：

var myImageData = ctx.getImageData(left,top,width,height);

这个方法会返回一个ImageData对象，它代表了画布区域的对象数据，此画布的四个角落分别表示为（left、top），（left+width，top），（left，top+height）与（left+width，top+height）四点。这些坐标点被设定为画布坐标空间元素。

注意：任何在画布以外的元素都会被返回成一个透明黑的ImageData对象。

    let img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = './bg5.jpg';
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d');
    img.onload = ()=>{
        ctx.drawImage(img,0,0);
        img.style.display = 'none'
    }

    let hoverColor = document.getElementsByClassName('hovered')[0]
    let selectColor = document.getElementsByClassName('selected')[0]
    
    function pick(event, destination, offsetX=0, offsetY=0){
        let x = event.layerX - offsetX;
        let y = event.layerY - offsetY;
        let pixel = ctx.getImageData(x,y,1,1);
        let data = pixel.data;

        const rgba = `rgba(${data[0]},${data[1]},${data[2]},${data[3] / 255})`;
        destination.style.background = rgba;
        destination.textContent = rgba;

        return rgba;
    }

    canvas.addEventListener('mousemove', function(event){
        pick(event,hoverColor,50,50);
    })
    canvas.addEventListener('click', function(event){
        pick(event,selectColor,50,50);
        console.log(event.layerX,event.layerY)
    })

    let body = document.getElementsByTagName('body')[0]
    body.addEventListener('click', function(event){
        console.log(event.layerX,event.layerY)
    });

在场景中写入像素数据

可以使用putImageData()方法去对场景进行像素数据的写入。

ctx.putImageData(myImageData, dx, dy);

dx 和 dy参数表示从场景左上角绘制的像素数据所得到的设备坐标。

eg：在场景内左上角绘制myImageData代表的图片，可以写如下代码：

ctx.putImageData(myImageData, 0, 0);

<body>
    图片偏移：
    <canvas id="canvas1" width="510" height="255"> </canvas>
    putImageData：
    <canvas id="canvas2" width="510" height="255"> </canvas>
</body>
<script type="module">
    let img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = './bg5.jpg';
    let canvas1 = document.getElementById('canvas1');
    let ctx1 = canvas1.getContext('2d');
    let canvas2 = document.getElementById('canvas2');
    let ctx2 = canvas2.getContext('2d');
    img.onload = ()=>{
        // ctx1.drawImage(img,0,0);
        // let imageData = ctx1.getImageData(0,0,canvas1.clientWidth,canvas1.clientHeight);
        // ctx2.putImageData(imageData,0,0)
        
        ctx1.drawImage(img,-700,-350);
        let imageData = ctx1.getImageData(200,0,300,210);
        ctx2.putImageData(imageData,0,0);
    }
</script>

图片灰度和反相颜色

在这个例子里，我们遍历所有像素以改变他们的数值。然后我们将被修改的像素数组通过 putImageData() 放回到画布中去。invert 函数仅仅是去减掉颜色的最大色值 255。grayscale 函数仅仅是用红绿和蓝的平均值。你也可以用加权平均，例如 x = 0.299r + 0.587g + 0.114b 这个公式。更多资料请参考百度百科的灰度。

<body>
    <canvas id="canvas" width="510" height="255"> </canvas>
    <form>
        <span class="span">
            <label>原图</label><input name="color" value="original" type="radio"/>
        </span>
        <sapn class="span">
            <label>反相</label><input name="color" value="invert" type="radio"/>
        </sapn>
        <sapn class="span">
            <label>灰度</label><input name="color" value="grayscale" type="radio"/>
        </sapn>
        <sapn class="span">
            <label>深灰</label><input name="color" value="sepia" type="radio"/>
        </sapn>
    </form>
</body>
<script type="module">
    let img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = './bg5.jpg';
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    img.onload = ()=>{
        ctx.drawImage(img,-700,-350);    
    }

    // 原图
    var original = ()=>{
        ctx.drawImage(img,-700,-350); 
    }
    
    // 反相
    var invert = ()=>{
        ctx.drawImage(img,-700,-350); // 重置数据源，否则会在之前图像处理的结果上进行反相
        const imageDate = ctx.getImageData(0,0,canvas.width,canvas.height);
        const data = imageDate.data;
        for (let i = 0; i < data.length; i+=4) {
            data[i] = 255 - data[i];    // red
            data[i+1] = 255 - data[i+1];    // green
            data[i+2] = 255 - data[i+2];    // blue
        }
        ctx.putImageData(imageDate,0,0);
    }

    // 灰度
    var grayscale = ()=>{
        ctx.drawImage(img,-700,-350); 
        const imageDate = ctx.getImageData(0,0,canvas.width,canvas.height);
        const data = imageDate.data;
        for (let i = 0; i < data.length; i+=4) {
            var avg = (data[i] + data[i+1] + data[i+2]) / 3;
            data[i] = data[i+1] = data[i+2] = avg;  
        }
        ctx.putImageData(imageDate,0,0);
    }

    // 深灰色
    var sepia = ()=>{
        ctx.drawImage(img,-700,-350); 
        const imageDate = ctx.getImageData(0,0,canvas.width,canvas.height);
        const data = imageDate.data;
        for (let i = 0; i < data.length; i+=4) {
            let red = data[i], green = data[i + 1], blue = data[i + 2];
    		data[i] = Math.min(Math.round(0.393 * red + 0.769 * green + 0.189 * blue), 255);
	    	data[i + 1] = Math.min(Math.round(0.349 * red + 0.686 * green + 0.168 * blue), 255);
		    data[i + 2] = Math.min(Math.round(0.272 * red + 0.534 * green + 0.131 * blue), 255);
        }
        ctx.putImageData(imageDate,0,0);
    }

    const inputs = document.querySelectorAll('[name=color]');
    for (const input of inputs) {
        input.addEventListener("change", function(evt) {
            switch (evt.target.value) {
                case "invert":
                    return invert();
                case "grayscale":
                    return grayscale();
                case "sepia":
                    return sepia();
                default:
                    return original();
            }
        });
    }
</script>

缩放和反锯齿

在drawImage(）方法，第二个画布和imageSmoothingEnabled属性的帮助下，我们可以放大显示我们的图片和看到的详细内容。

得到鼠标位置，并裁剪出5像素内的图片，将这幅图复制到另一个画布然后调整大小。在缩放画布中，将10x10像素的对原画布的剪裁调整为200x200.

zoomctx.drawImage(canvas,Math.abs(x-5),Math.abs(y-5),10,10,0,0,200,200);

因为反锯齿默认是启用的，可以关闭它以看到清除的像素，可以通过切换勾选框来看到imageSmoothingEnabled属性的效果（不同浏览器需要不同前缀）。

<canvas id="canvas" width="300" height="227"></canvas>
<canvas id="zoom" width="300" height="227"></canvas>
<div>
<label for="smoothbtn">
  <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn">
  Enable image smoothing
</label>
</div>

var img = new Image();
img.src = './bg5.jpg';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, -700, -350);
  img.style.display = 'none';
  var zoomctx = document.getElementById('zoom').getContext('2d');

  var smoothbtn = document.getElementById('smoothbtn');
  var toggleSmoothing = function(event) {
    zoomctx.imageSmoothingEnabled = this.checked;
    zoomctx.mozImageSmoothingEnabled = this.checked;
    zoomctx.webkitImageSmoothingEnabled = this.checked;
    zoomctx.msImageSmoothingEnabled = this.checked;
  };
  smoothbtn.addEventListener('change', toggleSmoothing);

  var zoom = function(event) {
    var x = event.layerX;
    var y = event.layerY;
    zoomctx.drawImage(canvas,
                      Math.abs(x - 5),
                      Math.abs(y - 5),
                      50, 50,
                      0, 0,
                      200, 200);
  };

  canvas.addEventListener('mousemove', zoom);
}

保存图片

HTMLCanvasElement 提供一个toDataURL() 方法，它返回一个包含被类型参数规定的图像表现格式的数据链接。返回的图片分辨率是96dpi。

canvas.toDataURL(‘image/png’) 默认设定。创建一个PNG图片

canvas.toDataURL(‘image/jpeg’,quality) 创建一个JPG图片。你可以有选择地提供从0到1的品质量，1表示最好的品质，0基本不被辨析但有比较小的文件大小。

当你从画布中生成了一个数据链接，可将其用于任何元素，或者将其放在一个有download属性的超链接中用于保存到本地。

也可以从画布中创建已Blob对象。

canvas.toBlob(callback,type,encoderOptions) 创建一个在画布中代表图片的Blob对象。


canvas优化

<canvas>元素是众多广泛使用的网络 2D 图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而，随着网站和应用将 canvas 画布推至极限，性能开始成为问题。此文目标是给使用 canvas 画布元素的优化带来建议，去保证你的网站或者应用表现卓越。

1.在离屏canvas上预渲染相似的图形或重复的对象

如果发现自己在每个动画帧上重复了一些相同的绘制操作，请考虑将其分流到屏幕外的画布上。然后根据需要频繁地将屏幕外图像渲染到主画布上，而不必首先重复生成该图像的步骤。

myEntity.offscreenCanvas = document.createElement("canvas");
myEntity.offscreenCanvas.width = myEntity.width;
myEntity.offscreenCanvas.height = myEntity.height;
myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");

myEntity.render(myEntity.offscreenContext);

2.避免浮点数的坐标点，用整数取而代之

当画一个没有整数坐标点的对象时会发生子像素渲染。

ctx.drawImage(myImage, 0.3, 0.5);

浏览器为了达到抗锯齿的效果会做额外的运算。为了避免这种情况，请保证在调用drawImage()函数时，用Math.floor()函数对所有的坐标点取整。


3.不要在用drawImage时缩放图像

在离屏canvas中缓存图片的不同尺寸，而不要用drawImage()去缩放它们。


4.使用多层画布去画一个复杂的场景

应用程序中，某些对象可能需要经常移动或更改，而其他对象则保持相对的静态。在这种情况下，可以使用多个<canvas>元素对项目进行分层优化。

例如：一个游戏，其UI位于顶部，中间是游戏性动作，底部是静态背景。在这种情况下，可将游戏分为三层<canvas>。UI将仅在用户输入时发生变化，游戏层随每个新框架发生变化，并且背景通常保持不变。

<div id="stage">
  <canvas id="ui-layer" width="480" height="320"></canvas>
  <canvas id="game-layer" width="480" height="320"></canvas>
  <canvas id="background-layer" width="480" height="320"></canvas>
</div>

<style>
  #stage {
    width: 480px;
    height: 320px;
    position: relative;
    border: 2px solid black
  }
  canvas { position: absolute; }
  #ui-layer { z-index: 3 }
  #game-layer { z-index: 2 }
  #background-layer { z-index: 1 }
</style>
5.用css设置大的背景图

如果像大多数游戏那样，有一张静态的背景图，用一个静态的<div>元素，结合background特性，将其置于画布元素之后。这么做可以避免在每一帧画布上绘制大图。

6.用css transforms特性缩放画布

CSS transforms使用GPU，因此速度更快。最好的情况是不直接缩放画布，或者具有较小的画布并按比例放大，而不是较大的画布并按比例缩小。

var scaleX = window.innerWidth / canvas.width;
var scaleY = window.innerHeight / canvas.height;

var scaleToFit = Math.min(scaleX, scaleY);
var scaleToCover = Math.max(scaleX, scaleY);

stage.style.transformOrigin = '0 0'; //scale from top left
stage.style.transform = 'scale(' + scaleToFit + ')';
7.关闭透明度

如果游戏使用画布而且不需要透明，当使用HTMLCanvasElement.getContext()创建一个绘图上下文时把alpha选项设置为false。这个选项可以帮助浏览器进行内部优化。

var ctx = canvas.getContext('2d', { alpha: false });
8.更多贴士


终曲

以上就是Canvas教程，下面将推荐一些网站可以去跟着学习、实践。

Codepen.io 前端开发人员操练场和在线编辑器

HTML5CanvasTutorials 包括大多数canvas API实例教程

31 days of Canvas tutorials JavaScript可视化编程入门教程

Game development MDN游戏开发教程

君子使物，不为物使
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用canvas.drawBitmapMesh()扭曲图片。达到揉动图片的效果
八步赶蝉
04-22 2857
主要用到canvas.drawBitmapMesh()方法：主要接收前5个参数,后3个参数是颜色及画笔相关，可设为null1.需要扭曲的源位图2.图片横向分成多少个3.图片纵向分成多少格4.一个float[]数组，具体作用如下：5.从第四个参数的数组中选第几个数组元素（哪个点）开始进行扭曲所以对图片的扭曲，揉动效果，根本上是对许多点进行扭曲。public class MainActivity ex...
PSD 替换智能图层的的实现处理图片效果图，保留扭曲变形效果
weixin_35877058的博客
08-02 628
电商贴图工具，api接口，sdk，3D效果图
uniapp通过Canvas绘制网格（心电图，坐标纸等可用）
最新发布
Agont_的博客
05-29 916
通过这段代码，可以将网格的外边距取消，并且将网格的背景颜色改成黑色(或者其他颜色自己喜欢就好)，通过这种改变DIV的背景颜色实现对网格添加背景颜色的方法，有利于我们之后在心电图操作中“显示/隐藏”网格的操作选项。所需要的高级网格需要三种大小的网格，分别为大、中、小，这三种网格需要被同时调用执行，故专写一个函数来共同调用三种大小的绘制函数。我之前文档内的心电图同款网格只需要将小型网格和大型网格函数删除，并且在总函数内，删除对这两个函数的调用即可。同时，将网格的颜色改变，即可实现我之前文档中的心电图同款网格。
绘制变形图形--Canvas的基本操作
chenzhao635的专栏
02-01 765
1、坐标的变换 对坐标的变换处理，有如下三种方式。 平移 移动图形的绘制主要是通过translate 方法来实现的，该方法定义如下所示。 context. translate(x, y); translate 方法使用两个参数——x表示将坐标轴原点向左移动多少个单位，默认情况下 为像素；y表示将坐标轴原点向下移动多少个单位。 缩放 使用图形上下文对象的scale方法将图形缩放。该方法的定义如下所...
HTML5 Canvas中绘制贝塞尔曲线
歪脖先生的博客
04-22 7061
绘制贝塞尔曲线贝塞尔曲线于1959年，由法国物理学家与数学家Paul de Casteljau所发明，于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，并用于汽车的车身设计。贝赛尔曲线为计算机矢量图形学奠定了基础，它的主要意义在于无论是直线或曲线都能在数学上予以描述。贝塞尔曲线分为两种：二次贝塞尔曲线和三次贝塞尔曲线。quadraticCurveTo()方法绘制二次...
在Flutter中使用Canvas绘制弧形进度条
u011198662的博客
08-01 1512
在Flutter中使用Canvas绘制弧形进度条一、进度条的属性以及成员变量二、初始化画笔`Paint`，调用`Canvas`绘制图形在绘制类中重写`paint()`和`shouldRepaint()`方法三、在其他Widget中使用绘制好的进度条 啊…这… 这种很鸡肋的需求，是来自WX某公众号推送的恰饭文章中偶然发现的，整体为弧形卡片设计的音乐播放器，包括音乐播放的进度条，而后觉得弧形进度条因吹斯汀，翻遍已有的Flutter教程帖后，并没有发现类似的帖子，所以我来了！ 本人Flutter萌新，第一次发
canvas学习笔记之绘制简单路径
01-21
1 线段（直线路径） 绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式，绘制当前或已经存在的路径 ...
canvas学习笔记之2d画布基础的实现
01-21
Canvas是啥 < canvas> 是一个可以使用脚本（通常是js）来绘图的HTML元素 < canvas> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari 如今，所有主流的浏览器都支持它（IE9+,更低版本需引入Explorer ...
html5中canvas学习笔记2-判断浏览器是否支持canvas
11-21
判断浏览器是否支持canvas，具体代码如下： 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
HTML5高级编程之图形扭曲及其应用一(原理篇)
我的java
10-18 525
HTML5中的几种变形 HTML5中的变形，共有以下几种方法 scale() 缩放rotate() 旋转translate() 平移transform() 矩阵变形setTransform() 重设矩阵 这几个方法，对图片一共能完成下面几种处理 但是，如果要实现下面这种不规则的变形，就不行了 那咱们一步步，先来看HTML5的这几个方法。 1，缩放方法如下 &lt;!DOCTYPE htm...
html如何让图片弯曲,如何在html5画布中弯曲/弯曲图像
weixin_42528222的博客
06-10 811
我有我想这样做到HTMLJSvar temp_can1, temp_can1_ctx;$(document).ready(function () {temp_can1 = document.getElementById('mycanvas');temp_can1_ctx = temp_can1.getContext('2d');var imageObj_rotator3 = new Image()...
关于canvas的使用（超详细的canvas知识体系讲解）
adminsir0的博客
06-07 8670
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线
canvas：理解canvas / 基础使用 / 实用demo
snowball的博客
10-30 3415
Canvas是一个HTML5元素，用于在Web页面上绘制2D或3D图形。它允许使用JavaScript在网页上创建和操作图形。Canvas的主要功能是绘图，但也可以用来实现其他功能，如动画和交互式游戏。
Canvas 从入门到劝朋友放弃（图解版）✨
weixin_39415598的博客
07-23 1007
本文简介 点赞 + 关注 + 收藏 = 学会了 在前端领域，如果只是懂 Vue 或者 React ，未来在职场的竞争力可能会比较弱。 根据我多年在家待业经验来看，前端未来在 数据可视化 和 AI 这两个领域会比较香，而 Canvas 是数据可视化在前端方面的基础技术。 本文就用光的速度将 canvas 给入门了。 要入门一个技术，前期最重要是快！所以本文只讲入门内容，能应付简单项目。深入的知识点会在其他文章讲解。 Canvas 是什么？ Canvas 中文名叫 “画布”，是 HTML5 新增
canvas详解01-绘制基本图形
大雾起了清晨
06-23 3474
既然我们已经设置了 canvas 环境，我们可以深入了解如何在 canvas 上绘制。到本文的最后，你将学会如何绘制矩形，三角形，直线，圆弧和曲线，变得熟悉这些基本的形状。绘制物体到 Canvas 前，需掌握路径，我们看看到底怎么做。
Android Canvas 方法总结
l_215851356的专栏
04-09 670
转载地址：http://www.jianshu.com/p/f69873371763 简介 在自定义 View的时候，我们经常需要绘制一些自己想要的效果。 这里就需要使用Canvas对象。 下面将Canvas对象常用方法做个笔记，方便记忆。 对Canvas进行操作 对Canvas的一系列操作，是指对Canvas进行旋转、平移、缩放等操作。 这些操作可以让Canva
canvas 知识总结（一）
weixin_46828094的博客
11-08 902
canvas 知识点总结（一）
（转）学习 HTML5 Canvas 这一篇文章就够了
02-27 835
学习 HTML5 Canvas 这一篇文章就够了 一、canvas 简介 ​<canvas>是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ​它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和Safari浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firef...
canvas红包雨学习笔记
05-13
Canvas红包雨是一种基于HTML5 Canvas技术开发的节日效果，通过JavaScript控制红包的下落和动画效果，实现一个红包雨的动态效果。 下面是Canvas红包雨的开发流程： 1. HTML页面中添加Canvas画布，并设置画布的宽高和样式。 ```html <canvas id="canvas"></canvas> ``` ```css #canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; } ``` 2. 在JavaScript中获取Canvas画布对象，并设置画布的宽高。 ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ``` 3. 定义红包对象，包括红包的位置、速度、大小和颜色等属性。 ```javascript function RedPacket(x, y, vx, vy, size, color) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.size = size; this.color = color; } ``` 4. 在Canvas画布上绘制红包，并实现红包的下落和动画效果。 ```javascript var redPackets = []; // 存储红包对象的数组 function drawRedPacket(redPacket) { ctx.beginPath(); ctx.arc(redPacket.x, redPacket.y, redPacket.size, 0, 2 * Math.PI); ctx.fillStyle = redPacket.color; ctx.fill(); } function updateRedPacket(redPacket) { redPacket.x += redPacket.vx; redPacket.y += redPacket.vy; redPacket.vy += gravity; } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < redPackets.length; i++) { drawRedPacket(redPackets[i]); updateRedPacket(redPackets[i]); } requestAnimationFrame(animate); } requestAnimationFrame(animate); ``` 5. 实现红包的自动生成和动态效果，可以通过setInterval或setTimeout定时调用生成红包的函数。 ```javascript function createRedPacket() { var x = Math.random() * canvas.width; var y = -20; var vx = Math.random() * 6 - 3; var vy = Math.random() * 2 + 2; var size = Math.random() * 10 + 10; var color = '#' + Math.floor(Math.random() * 16777215).toString(16); // 随机生成颜色 var redPacket = new RedPacket(x, y, vx, vy, size, color); redPackets.push(redPacket); } setInterval(createRedPacket, 500); // 每500ms生成一个红包 ``` 6. 实现红包的点击事件，当用户点击红包时，可以实现红包爆炸效果，并显示红包金额或祝福语。 ```javascript function explodeRedPacket(redPacket) { var particles = []; // 存储爆炸粒子的数组 for (var i = 0; i < 20; i++) { var particle = { x: redPacket.x, y: redPacket.y, vx: Math.random() * 6 - 3, vy: Math.random() * 6 - 3, size: Math.random() * 3 + 1, color: redPacket.color }; particles.push(particle); } for (var i = 0; i < particles.length; i++) { drawRedPacket(particles[i]); } } canvas.addEventListener('click', function(event) { var x = event.clientX; var y = event.clientY; for (var i = 0; i < redPackets.length; i++) { var redPacket = redPackets[i]; if (x > redPacket.x - redPacket.size && x < redPacket.x + redPacket.size && y > redPacket.y - redPacket.size && y < redPacket.y + redPacket.size) { explodeRedPacket(redPacket); redPackets.splice(i, 1); break; } } }); ``` 上述就是Canvas红包雨的开发流程，通过Canvas技术和JavaScript实现红包的下落、动画、自动生成和点击事件等效果，可以增加网站的趣味性和用户互动性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值