canvas 图形剪裁clip、缩放、旋转、位移translate、变换矩阵transform

拼搏现实的明天。 2021-07-24 19:43 900阅读 0赞

剪裁
    	根据当前所绘制的图形,对之后的所有图形进行剪裁,在这之后的所有图形在裁剪区域才显示,在这之前的不受影响
    	ctx.clip()
    	
    例:裁剪图片
    	    ctx.beginPath();
    	    ctx.moveTo(20, 20);
    	    ctx.lineTo(200, 80);
    	    ctx.lineTo(110, 150);
    	    剪裁
    	    ctx.clip();
    	    填充图片
    	    ctx.drawImage(img, 0, 0, 250, 167);

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
第一次剪裁  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]  
第二次剪裁  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]

第三次剪裁  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 3]

第四次剪裁  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 4]

2、缩放
    	进行缩放后,下次绘制的图形会进行大小和定位坐标位置的缩放,缩放前的图形不受影响
    	ctx.scale(n,n);		x缩放倍数,y缩放倍数
    	
    	ctx.strokeRect(5,5,25,15);
    	ctx.scale(2,2);
    	ctx.strokeRect(5,5,25,15);
    	ctx.scale(2,2);
    	ctx.strokeRect(5,5,25,15);
    	ctx.scale(2,2);
    	ctx.strokeRect(5,5,25,15);

![在这里插入图片描述][c8a74f32a3f14bc09624d71b1a2ae2f0.png]

3、旋转
    	旋转当前视图,及旋转后的绘制都会被旋转
    	ctx.rotate(20*Math.PI/180);		弧度制,当前表示旋转20度
    	ctx.fillRect(50,20,100,50);
    
    4、位移translate
    	方法重新映射画布上的(0,0)位置,及之后的绘制的参照坐标,从映射后位置开始
    	ctx.fillRect(10,10,100,50);
    	ctx.translate(70,70);
    	ctx.fillRect(10,10,100,50);

![在这里插入图片描述][e85e28bcacf140de9a0d4dcde2db1f80.png]

5、变换矩阵
    	transform
    		绘制一个图形,通过transform()添加一个新的变换矩阵,再次绘制矩形进行扭转,每次调用transform()时,会在前一个变换矩阵上构建
    		ctx.transform(a,b,c,d,e,f);
    			a	水平缩放绘图	在原位置进行缩放
    			b	水平倾斜绘图	弧度制,非旋转,及移动水平线,图形会跟着水平线进行倾斜变换
    			c	垂直倾斜绘图	弧度制,非旋转,及移动水平线,图形会跟着水平线进行倾斜变换
    			d	垂直缩放绘图	在原位置进行缩放
    			e	水平移动绘图
    			f	垂直移动绘图
    			ctx.fillStyle="yellow";
    			ctx.fillRect(0,0,100,100)
    			ctx.transform(1,45*Math.PI/180,45*Math.PI/180,1,0,0);
    			ctx.fillStyle="red";
    			ctx.fillRect(0,0,100,100);
    			ctx.transform(1,45*Math.PI/180,45*Math.PI/180,1,30,10);
    			ctx.fillStyle="blue";
    			ctx.fillRect(0,0,250,100);
    			
    	setTransform
    		用法和transform相同,但是会重置上次的变换矩阵,及每次在当前扭转矩阵上变换
    		ctx.fillStyle="yellow";
    		ctx.fillRect(0,0,250,100)
    		ctx.setTransform(1,0.5,-0.5,1,30,10);
    		ctx.fillStyle="red";
    		ctx.fillRect(0,0,250,100);
    		ctx.setTransform(1,0.5,-0.5,1,40,10);
    		ctx.fillStyle="blue";
    		ctx.fillRect(0,0,250,100);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][a8cf299214f844b3afd7c81a43657197.png]

代码示例:

// 绘制第一个圆 
    let cx=200;
    let cy=300;
    let radius=100;
    ctx.beginPath(); 
    ctx.fillStyle = 'red'; 
    ctx.arc(cx, cy, radius, 0, Math.PI * 2, false); 
    ctx.fill(); 
    // ctx.clip();
    
    // 绘制第二个圆 
    ctx.beginPath(); 
    ctx.fillStyle = 'orange'; 
    ctx.arc(cx + 100, cy, radius, 0, Math.PI * 2, false); 
    ctx.fill(); 
    // ctx.clip();
    
    // 绘制第三个圆 
    ctx.beginPath(); 
    ctx.fillStyle = 'purple'; 
    ctx.arc(cx, cy + 100, radius, 0, Math.PI * 2, false); 
    ctx.fill(); 
    // ctx.clip()
    
    // 绘制第四个圆 
    ctx.beginPath(); 
    ctx.strokeStyle = 'skyblue';
    ctx.lineWidth = 10; 
    ctx.arc(cx, cy, radius, 0, Math.PI * 2, false); 
    ctx.stroke(); 
    ctx.restore();
    ctx.clip()	//第四次剪裁

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/bafdd5a8d41b4866ac01ea260cc8724b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/9b5c6b5c10c4423aad26ada6d771c002.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/27971f81473f43a8baf384cc2c40835a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 3]: /images/20210724/4f61e456c2c743b6a79971d433d5c27b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 4]: /images/20210724/6f09ad3e41084a5ca4301a9d694fdbab.png
[c8a74f32a3f14bc09624d71b1a2ae2f0.png]: /images/20210724/08d61630e63f4f7fa411206c2b395bc1.png
[e85e28bcacf140de9a0d4dcde2db1f80.png]: /images/20210724/5b266242b9764a4a87fcf1719299ddca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 5]: /images/20210724/5258ee3c12ad4635a8c14b448cdaaabd.png
[a8cf299214f844b3afd7c81a43657197.png]: /images/20210724/630535d508cc41388640e1c2a688a8c8.png