Path2D

Path2D 概念

Canvas 2D API 的接口 Path2D 用来声明路径，此路径稍后会被CanvasRenderingContext2D 对象使用。CanvasRenderingContext2D 接口的 路径方法 也存在于 Path2D 这个接口中，允许你在 canvas 中根据需要创建可以保留并重用的路径。
当前IE safari 还不支持

作用

一句话， 缓存图形path

作用场景

  • 假如随机生成的图形，常见的方法，保存图形参数
  • clearRect 清空canvas后，需要回显刚才的图形
  • isPointInPath 判断事件path区域

常见使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var tmpPathArr = [];
for ( var i=0; i<10; i++ ){
    var cx = Math.floor( Math.random()*300 ),
        cy = Math.floor( Math.random()*300 ),
        r = Math.floor( Math.random() * 255 ),
        g = Math.floor( Math.random() * 255 ),
        b = Math.floor( Math.random() * 255 ) ; 

    ctx.beginPath();  
    ctx.fillStyle = 'rgb('+r+','+g+','+b+')';
    ctx.arc(cx, cy, 30, 0, 2*Math.PI);
    ctx.fill();
    //保存图形的参数
    tmpPathArr.push( {cx:cx,cy:cy,rgb:ctx.fillStyle} );
}

//清空后回显
ctx.clearRect(0,0, canvas.width, canvas.height);
tmpPathArr.map(function(v){
    ctx.beginPath();  
    ctx.fillStyle = v.rgb;
    ctx.arc(v.cx, v.cy, 30, 0, 2*Math.PI);
    ctx.fill();
});

//isPointInPath
canvas.onmousedown = function(ev){  
    var e = ev||event;  
    var x = e.clientX;  
    var y = e.clientY;  
    tmpPathArr.map(function(v){
        ctx.beginPath();
        ctx.arc(v.cx, v.cy, 30, 0, 2*Math.PI);
        if ( ctx.isPointInPath(x,y) ){  
            // 判断区域
        }
    });
};

使用Path2D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var tmpPathArr = [];
for ( var i=0; i<10; i++ ){
    var cx = Math.floor( Math.random()*300 ),
        cy = Math.floor( Math.random()*300 ),
        r = Math.floor( Math.random() * 255 ),
        g = Math.floor( Math.random() * 255 ),
        b = Math.floor( Math.random() * 255 ) ; 

    ctx.beginPath();  
    ctx.fillStyle = 'rgb('+r+','+g+','+b+')';

    //利用path2直接保存图形，然后绘制图形
    var path2D = new Path2D();        
    path2D.arc(cx, cy, 30, 0, 2*Math.PI);
    path2D.rgb = ctx.fillStyle;
    ctx.fill( path2D );
    //保存图形的参数
    tmpPathArr.push( path2D );
}

//清空后回显
ctx.clearRect(0,0, canvas.width, canvas.height);
tmpPathArr.map(function(v){
    ctx.beginPath();
    ctx.fillStyle = v.rgb;
    ctx.fill( v );
});

//isPointInPath
canvas.onmousedown = function(ev){  
    var e = ev||event;  
    var x = e.clientX;  
    var y = e.clientY;  
    tmpPathArr.map(function(v){
        if ( ctx.isPointInPath(v, x,y) ){
            //判断区域
        }
    });
};

Path2优点

  • 直接保存图形，不用关心图形参数，快速绘制
  • 判断事件区域时，简单直接的使用 ctx.isPointInPath(path2D,x,y) ，不用绘制缓存的图形，取得上下文context后再判断
  • 如果是多path的复杂图形，使用path2D优势将更明显，不需要保存图形复杂的绘制参数，方便开发和使用

离屏canvas

离屏canvas

  • 创建的一个不显示的canvas，方便保存画布的静态场景
  • 减少图形的绘制，优化性能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//创建离屏canvas
var  offCanvas = document.createElement("canvas");  
offCanvas.width=400;  
offCanvas.height=400;  
var offContext = offCanvas.getContext("2d");  

for ( var i=0; i<10; i++ ){
    var cx = Math.floor( Math.random()*300 ),
        cy = Math.floor( Math.random()*300 ),
        r = Math.floor( Math.random() * 255 ),
        g = Math.floor( Math.random() * 255 ),
        b = Math.floor( Math.random() * 255 ) ; 
    //在离屏canvas上绘制场景，此时图形在离屏canvas上，并不显示
    offContext.beginPath();  
    offContext.fillStyle = 'rgb('+r+','+g+','+b+')';
    offContext.arc(cx, cy, 30, 0, 2*Math.PI);
    offContext.fill();
}
//drawImage直接绘制整个离屏canvas的图形
ctx.drawImage(offCanvas,0,0);

使用场景

  • 静态的背景及不变的图形，每次重绘、回显时，可以直接绘制背景及图形，优化性能
  • 重复或相似的图形，此时，可以将离屏canvas类比Sprite，保存各种图形的不同状态，利用drawImage 定位图形位置和区域大小，绘制要需要的部分图形