canvas，让脆片飞一会儿

最新推荐文章于 2023-06-07 17:18:47 发布
最新推荐文章于 2023-06-07 17:18:47 发布
阅读量1k 收藏 1
点赞数
分类专栏： canvas 文章标签： js canvas 背景 前端效果 js效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nbin2008/article/details/49229467
版权


http://www.hui12.com/nbin/csdn/canvasBg/demo.html

https://nbin2008.github.io/demo/canvasBg/index.html


代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="CanvasBg.js"></script>
	</head>
	<body>
		<canvas id="mycanvas" width="400" height="400" style="border: 1px solid #000;"></canvas>
		<canvas id="mycanvas2" width="400" height="400" style="border: 1px solid #000;"></canvas>
		
		<script type="text/javascript">
			var mycanvas = document.getElementById("mycanvas");
			var mycanvas2 = document.getElementById("mycanvas2");
			var bg = "bg.png"

			
			var c = new CanvasBg({
				mycanvas: mycanvas,
				bg: bg,
				bgNum: 8
			});
			var c2 = new CanvasBg({
				mycanvas: mycanvas2
			})
		</script>
	</body>
</html>


<pre name="code" class="javascript">(function(window){
	function CanvasBg(e){
		this.init(e);
	};
	var proto = {
		init: function(e){
			this.before(e);
			this.ddraw();
		},
		before: function(e){
			var This = this;
			this.mycanvas = e.mycanvas;
			this.width = this.mycanvas.width;
			this.height = this.mycanvas.height;
			this.bgNum = e.bgNum || 0;
			this.cache = [];
			var mycanvas = this.mycanvas;
			var myc = mycanvas.getContext('2d');
			var bg = e.bg;
			if( bg ){
				var img = new Image();
				img.src = bg;
				this.bg = img;
				img.onload = function(){
					This.create();
				};
			}else{
				this.bg = false;
				this.create();
			};
		},
		create: function(){
			var This = this,	
				width = this.width,
				height = this.height,
				distance = Math.sqrt((width/2)*(width/2)+(height/2)*(height/2)),
				cache = this.cache;
			this.distance = Math.round(distance);
				
			setInterval(function(){
					var length = This.cache.length;
					if( length < 300 ){
						fnCreate();
					};
			},100);
			function fnCreate(){
				var angle = getAngle(),
					speed = getSpeed(),
					sScale = scale12(),
					bgIndex = getBg(This.bgNum);
				cache.push({
					angle: angle,
					distanceNow: Math.round(distance),
					speed: speed,
					sScale: sScale,
					bgIndex: bgIndex
				});
			};
			function getBg(n){
				return Math.round(Math.random()*(n-1));
			};
			function getSpeed(){
				return Math.round(Math.random()*8+1)/1;
			};
			function scale12(){
				return (Math.random()+1);
//				return 1;
			}
			function getAngle(){
				var n = Math.round(Math.random()*360);
				/*var a = Math.atan(height/width)*180/Math.PI;
				while( (n>=a && n<=180-a) || (n>=a+180 && n<360-a) ){
					n = Math.round(Math.random()*360);
					max = Math.atan(height/width);
				};*/
				return n;
			};
		},
		ddraw: function(){
			var This = this,
				bg = this.bg,
				width = this.width,
				height = this.height,
				mycanvas = this.mycanvas,
				myc = mycanvas.getContext('2d'),
				cache = this.cache;
			
			setInterval(draw, 100);
			function draw(){
				myc.clearRect(0,0,width,height);
				myc.globalCompositeOperation = 'lighter';
				var i = cache.length-1;
				var distance = This.distance;
				while(i>= 0){
					var mycbg = createBg(i);
					var distanceNow = cache[i]["distanceNow"];
					var angle = cache[i]["angle"];
					myc.save();
					myc.translate(width/2, height/2);
					myc.rotate(angle*Math.PI/180);
					myc.drawImage(mycbg,distanceNow,0);
					myc.restore();
					i--;
				};
			};
			function createBg(i){
				var bgCanvas = document.createElement('canvas');
					bgCanvas.width = 100;
					bgCanvas.height = 100;
					smyc = bgCanvas.getContext('2d'),
					distance = This.distance,
					mScale = cache[i]["distanceNow"]/distance
				smyc.scale(cache[i]['sScale'],cache[i]['sScale']);
				smyc.scale(mScale,mScale);
				mScale *= 1.2;
				mScale = mScale<=0.2?0.2:mScale;
				smyc.globalAlpha = mScale;
				if( bg ){
					smyc.drawImage(bg, 50*cache[i]['bgIndex'], 0, 50, 50, 0, 0, 50, 50 );
				}else{
					if( cache[i]['crisp'] ){
						cache[i]['crisp'](smyc);
					}else{
						cache[i]['crisp'] = createCrisp(smyc);
					};	
				};
				return bgCanvas;
			};
			function createCrisp(smyc){
				var tmpArr = [],
					i = 0,
					n = gShape();
				smyc.beginPath()
				while( i<=n ){
					tmpArr.push([gCoord(), gCoord()])
					i++;
				};
				tmpArr.push([gColor(),gColor(),gColor()]);
				function gShape(){
					return Math.round(Math.random()*1+3);
				};
				function gCoord(){
					return Math.round(Math.random()*50);
				};
				function gColor(){
					return Math.round(Math.random()*255);
				};
				
				var tmpFn = function(smyc){
					for( var z=0,l=tmpArr.length; z<l; z++ ){
						var tmp = tmpArr[z];
						if( tmp.length == 2 ){
							if(z==0){
								smyc.beginPath();
								smyc.moveTo(tmp[0], tmp[1]);
							}else{
								smyc.lineTo(tmp[0], tmp[1]);
							};
							if( z==l-2 ){
								smyc.closePath();
							}
						}else{
							smyc.fillStyle = "rgb("+ tmp[0] +","+ tmp[1] +","+ tmp[2] +")";
							smyc.fill();
						}
					};
				};
				tmpFn(smyc);
				return tmpFn;
			};
			
			setInterval(change,100);
			function change(){
				var i=cache.length-1;
				while( i>=0 ){
					cache[i]["distanceNow"] -= cache[i]['speed'];
					if( cache[i]['distanceNow']<=0 ){
						cache.splice(i,1);
					};
					i--;
				};
			};
		}
	};
	CanvasBg.prototype = proto;
	window.CanvasBg = CanvasBg;
})(window);


 使用方法： 

 

var c = new CanvasBg({mycanvas: mycanvas,bg: bg,bgNum: 8});
 

var c2 = new CanvasBg({mycanvas: mycanvas2})
 

new CanvasBg对象，接受一个json数据。
 

mycanvas：canvas元素
 

bg：使用自己的图片，可选参数
 

bgNum：自己图片上脆片的个数，和bg同时使用。
 

如果使用自己的图片，则图片有规范：以50*50像素，从左往右
 

 

 

效果逻辑部分：
 

 

before: function(e){
	var This = this;
	this.mycanvas = e.mycanvas;
	this.width = this.mycanvas.width;
	this.height = this.mycanvas.height;
	this.bgNum = e.bgNum || 0;
	this.cache = [];
	var mycanvas = this.mycanvas;
	var myc = mycanvas.getContext('2d');
	var bg = e.bg;
	if( bg ){
		var img = new Image();
		img.src = bg;
		this.bg = img;
		img.onload = function(){
			This.create();
		};
	}else{
		this.bg = false;
		this.create();
	};
}
这个方法是判断有没有图片参数，最后都是运行create()方法。cache为数组，放脆片数据用 

 


 
 

 

create: function(){
	var This = this,	
		width = this.width,
		height = this.height,
		distance = Math.sqrt((width/2)*(width/2)+(height/2)*(height/2)),
		cache = this.cache;
	this.distance = Math.round(distance);
		
	setInterval(function(){
<pre name="code" class="javascript"><span style="white-space:pre">		</span>var length = This.cache.length;
		if( length < 300 ){
			fnCreate();
		};
 },100);function fnCreate(){var angle = getAngle(),<span style="white-space:pre"> </span>//脆片出现的角度speed = getSpeed(),<span style="white-space:pre"> </span>//脆皮运行的速度sScale = scale12(),<span style="white-space:pre"> </span>//图片开始位置时的大小，使用1-2之间的随机数缩放bgIndex = getBg(This.bgNum);<span style="white-space:pre"> </span>//图片上面有多少个脆片，取随机位置cache.push({angle: angle,distanceNow: Math.round(distance),<span style="white-space:pre"> </span>//这个是脆片对应的位置，一直会变化，初始值与distance相等。speed: speed,sScale: sScale,bgIndex: bgIndex});};function getBg(n){return Math.round(Math.random()*(n-1));};function getSpeed(){return Math.round(Math.random()*8+1)/1;};function scale12(){return (Math.random()+1);}function getAngle(){var n = Math.round(Math.random()*360);/*var a = Math.atan(height/width)*180/Math.PI;while( (n>=a && n<=180-a) || (n>=a+180 && n<360-a) ){n = Math.round(Math.random()*360);max = Math.atan(height/width);};*/return n;};} 

 这个方法为cache数据构造。diatance：以canvas的中心为中点（width/2，height/2），中点到canvas原点（0，0）的距离，因为图片都是从外往里汇聚的。这个数值不做更改，为固定值。 

 

getAngle()：脆片出现的轨迹，默认是全屏，返回的是0-360的数字。修改这里的返回值，可以设置脆片出现的范围。以canvas的中心为中点，顺时针方向为对应角度的出现范围。
 

 

 

ddraw: function(){
	var This = this,
		bg = this.bg,
		width = this.width,
		height = this.height,
		mycanvas = this.mycanvas,
		myc = mycanvas.getContext('2d'),
		cache = this.cache;
	
	setInterval(draw, 100);
	function draw(){
		myc.clearRect(0,0,width,height);
		myc.globalCompositeOperation = 'lighter';
		var i = cache.length-1;
		var distance = This.distance;
		while(i>= 0){
			var mycbg = createBg(i);
			var distanceNow = cache[i]["distanceNow"];<span style="white-space:pre">	</span>//与diatance的值做比列，这个很重要
			var angle = cache[i]["angle"];<span style="white-space:pre">		</span>//脆片的接口
			myc.save();
			myc.translate(width/2, height/2);<span style="white-space:pre">	</span>//位移到canvas中点，距离
			myc.rotate(angle*Math.PI/180);<span style="white-space:pre">		</span>//位移到canvas中点，角度
			myc.drawImage(mycbg,distanceNow,0);<span style="white-space:pre">	</span>//渲染
			myc.restore();
			i--;
		};
	};
	function createBg(i){
		var bgCanvas = document.createElement('canvas');
			bgCanvas.width = 100;
			bgCanvas.height = 100;
			smyc = bgCanvas.getContext('2d'),
			distance = This.distance,
			mScale = cache[i]["distanceNow"]/distance
		smyc.scale(cache[i]['sScale'],cache[i]['sScale']);<span style="white-space:pre">	</span>//默认构建脆片的大小，1-2之间
		smyc.scale(mScale,mScale);<span style="white-space:pre">	</span>//脆片运动就是根据这个比列，很重要
		mScale *= 1.2;<span style="white-space:pre">		</span>//乘以1.2，脆片在往中点汇聚的过程中，有时候还比较远就消失了，所以做了这个方法
		mScale = mScale<=0.2?0.2:mScale;
		smyc.globalAlpha = mScale;
		if( bg ){<span style="white-space:pre">	</span>//以雪碧图为脆片
			smyc.drawImage(bg, 50*cache[i]['bgIndex'], 0, 50, 50, 0, 0, 50, 50 );
		}else{<span style="white-space:pre">		</span>//随机脆片
			if( cache[i]['crisp'] ){
				cache[i]['crisp'](smyc);
			}else{
				cache[i]['crisp'] = createCrisp(smyc);
			};	
		};
		return bgCanvas;
	};
	function createCrisp(smyc){
		var tmpArr = [],
			i = 0,
			n = gShape();
		smyc.beginPath()
		while( i<=n ){
			tmpArr.push([gCoord(), gCoord()])
			i++;
		};
		tmpArr.push([gColor(),gColor(),gColor()]);
		function gShape(){
			return Math.round(Math.random()*1+3);
		};
		function gCoord(){
			return Math.round(Math.random()*50);
		};
		function gColor(){
			return Math.round(Math.random()*255);
		};
		
		var tmpFn = function(smyc){
			for( var z=0,l=tmpArr.length; z<l; z++ ){
				var tmp = tmpArr[z];
				if( tmp.length == 2 ){
					if(z==0){
						smyc.beginPath();
						smyc.moveTo(tmp[0], tmp[1]);
					}else{
						smyc.lineTo(tmp[0], tmp[1]);
					};
					if( z==l-2 ){
						smyc.closePath();
					}
				}else{
					smyc.fillStyle = "rgb("+ tmp[0] +","+ tmp[1] +","+ tmp[2] +")";
					smyc.fill();
				}
			};
		};
		tmpFn(smyc);
		return tmpFn;
	};
	
	setInterval(change,100);
	function change(){
		var i=cache.length-1;
		while( i>=0 ){
			cache[i]["distanceNow"] -= cache[i]['speed'];
			if( cache[i]['distanceNow']<=0 ){
				cache.splice(i,1);
			};
			i--;
		};
	};
}
绘制canvas效果的主要部分。 

 

draw（）方法：实时渲染，一直根据cache中的数据做渲染
 
 

createBg（）：创建bgcanvas给draw方法使用
 
 

createCrisp（）：如果没有传入图片，则为createBg实时创建bg
 
 

主要使用的canvasAPI:
 

translate() 脆片的位置/距离
 
 

rotate() 脆片的位置/角度
 
 

scale() 脆片的大小和透明度
 
 

drawImage() 背景构建
 
 


 
 

 

function change(){
	var i=cache.length-1;
	while( i>=0 ){
		cache[i]["distanceNow"] -= cache[i]['speed'];
		if( cache[i]['distanceNow']<=0 ){
			cache.splice(i,1);
		};
		i--;
	};
};
因为脆片是不停的在运动的，所以肯定对应的数据在变化，这个方法是更改distanceNow的值，同时设定临界点，满足临界点则从cache中删除这个数据。 

 

 

 

=================追加修改======================
 

优化1：
 

 

			setInterval(function(){
				fnCreate();
			},50);
			function fnCreate(){
				var angle = getAngle(),
					speed = getSpeed(),
					sScale = scale12(),
					bgIndex = getBg(This.bgNum);
				
				for( var i=0, len=cache.length; i<len; i++){
					if( cache[i]["isEnd"] ){
						cache[i] = {
								angle: angle,
								distanceNow: Math.round(distance),
								speed: speed,
								sScale: sScale,
								bgIndex: bgIndex,
								isEnd: false,
						};
						return;
					};
				};
				cache.push({
					angle: angle,
					distanceNow: Math.round(distance),
					speed: speed,
					sScale: sScale,
					bgIndex: bgIndex,
					isEnd: false,
				});
			};
 

 

function change(){
				var i=cache.length-1;
				while( i>=0 ){
					cache[i]["distanceNow"] -= cache[i]['speed'];
					if( cache[i]['distanceNow']<=0 ){
						cache[i]["isEnd"] = true;
					};
					i--;
				};
			};
 


 
 

优化2：
 
 

 

function createBg(i){
				var bgCanvas;
				if( bgCanvasJson[i] ){
					bgCanvas = bgCanvasJson[i]
				}else{
					var c = document.createElement('canvas');
					c.width = 100;
					c.height = 100;
					bgCanvasJson[i] = c;
					bgCanvas = bgCanvasJson[i];
				};
				var smyc = bgCanvas.getContext('2d');
				smyc.save();
				smyc.clearRect(0,0,100,100);
				distance = This.distance,
				mScale = cache[i]["distanceNow"]/distance
				smyc.scale(cache[i]['sScale'],cache[i]['sScale']);
				smyc.scale(mScale,mScale);
				mScale *= 1.2;
				mScale = mScale<=0.2?0.2:mScale;
				smyc.globalAlpha = mScale;
				if( bg ){
					smyc.drawImage(bg, 50*cache[i]['bgIndex'], 0, 50, 50, 0, 0, 50, 50 );
				}else{
					if( cache[i]['crisp'] ){
						cache[i]['crisp'](smyc);
					}else{
						cache[i]['crisp'] = createCrisp(smyc);
					};	
				};
				smyc.restore();
				return bgCanvas;
			};
 

 


 

                

        

        

    




    

      

        

            

              
                
                  nbin斌
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
canvas飞机大战.zip

				
			

			

				

					04-17
				

			

		

		

			
				
在这个游戏中，开发者巧妙地运用了canvas画布的特性，通过JavaScript控制游戏逻辑，为玩家呈现了一个激动人心的空战场景。  首先，我们要了解canvas是什么。Canvas是HTML5中的一个核心元素，它提供了一种在网页上...

			
		

	



                

              
                



	

		

			

				
					
前端canvas项目：飞机大战.zip

				
			

			

				

					07-20
				

			

		

		

			
				
canvas飞机大战，源码详解加所需图片，免费下载！欢迎大家下载交流，如果代码有误希望及时指正，谢谢

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					adminsir0的博客
				

				

					06-07
					
					8629
					
				

			

		

		

			
				
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线

			
		

	





	

		

			

				
					
【微信小程序】自适应Canvas 带跑马灯的辛运大转盘 内附代码和详解

				
			

			

				

					NAMECZ的博客
				

				

					06-27
					
					9897
					
				

			

		

		

			
				
第一篇关于Canvas环形进度条的博文获得不少关注度，时隔这么多日才发出第二篇关于Canvas的博文，并不是我懈怠了，而是最近公司比较忙，写好的demo一直没机会发，今天公司终于闲下来了，把我做好的demo整理一下发上来，给喜欢canvas的初学者看看，因为本人也是初学者，所以一下内容仅供参考，有不理解的地方或者有更好的想法，都可以与我联系，互相探讨一下。

决定写这个幸运大转盘是因为网上的素材很...

			
		

	



		

			
		



	

		

			

				
					
canvas实现5张图片合成一张图片

					
热门推荐

				
			

			

				

					努力学习的肥宅
				

				

					08-20
					
					1万+
					
				

			

		

		

			
				
具体要实现的效果类似下面这张图片，主题流程大概是，页面上有类似这样布局的结构，点击中间那个紫色的按钮就会生成一张这样的图片，并且能够让用户下载图片的



1、首先我们布局页面的时候用的都是图片来布局成这个样子[CSS自己脑补]，class为pho-bg这一段是页面开始显示的结构，几张图片定位，按钮在中间的样子。class为photo的就是用来到时候放置生成的图片。canvas就是画布。至于下面的...

			
		

	





	

		

			

				
					
【uniapp】微信小程序canvas签名旋转生成图片

				
			

			

				

					rrrrroy_Ha的博客
				

				

					09-18
					
					6552
					
				

			

		

		

			
				
实际测试过程中，会有画布大小的兼容性问题，具体表现为，在代码里设置的画布背景是白色，在某些屏宽（宽高比比iphone7还大）的iphone上，生成的图片可能会存在右侧一竖列区域（如果没做旋转处理实际上是图片的底部区域）是透明的情况，用图片指示一下。一般的签名是需要用户横屏手写的，但对手机来说实际是竖着写的，保存的图片也是按手机（竖长型）的样子来的，在pc端展示的话需要用css旋转才行，但若有后台生成pdf此类需求的话，那就不好去旋转图片了，为了一劳永逸还得从生成的源头控制才行。，便能曲线实现我们的需求。

			
		

	





	

		

			

				
					
html5--canvas--众神眷恋的幻想乡(STG)

				
			

			

				

					好好学习天天向上
				

				

					01-14
					
					2250
					
				

			

		

		

			
				
一个小游戏，也花了点功夫，稍微记录一下过程。主要用HTML5的canvas的一些API，早就想模仿东方project系列弹幕游戏写一个了，但以前学C/C++时嫌windowAPI太麻烦就没写，现在正好浏览器自带界面，canvas又提供了很好的绘制环境，于是就仿东方风神录写了一个。

项目地址：https://github.com/dreamhuan/stg-game 欢迎加star⊙▽⊙

			
		

	





	

		

			

				
					
canvas实现3D飞机飞行动画特效

				
			

			

				

					01-10
				

			

		

		

			
				
利用html5中的canvas技术实现3d飞机的飞行动画特效~~~

			
		

	





	

		

			

				
					
Canvas爱心不断飞出动画特效特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
在"Canvas爱心不断飞出动画特效"中，核心概念是时间序列和运动轨迹的计算。我们首先需要定义爱心的形状，通常是一个心形路径，这可以通过`beginPath()`、`moveTo()`、`lineTo()`等方法构建。例如：  ```javascript ...

			
		

	





	

		

			

				
					
基于canvas飞机大战

				
			

			

				

					08-28
				

			

		

		

			
				
基于canvas飞机大战特效，可以直接运行；基于canvas飞机大战特效，可以直接运行；基于canvas飞机大战特效，可以直接运行；基于canvas飞机大战特效，可以直接运行；基于canvas飞机大战特效，可以直接运行

			
		

	





	

		

			

				
					
Canvas的JS操作基本功

				
			

			

				

					qq937654393的博客
				

				

					10-07
					
					3168
					
				

			

		

		

			
				
创建 Canvas 画布
Canvas没有设置宽高，那么会自动创建一个 300 * 150 的画布（单位默认为 px）。
可以通过html属性设置或JS 属性设置 width、height。不要使用 CSS 设置，CSS的宽高设置会影响canvas的宽高比例。如下代码为用html属性设置。
<!DOCTYPE html>
<html lang="en">
<head&...

			
		

	





	

		

			

				
					
微信小程序之canvas画布

				
			

			

				

					奋斗的老年人
				

				

					02-04
					
					2422
					
				

			

		

		

			
				
前言

只要干不死，就要往死干！！！




			
		

	





	

		

			

				
					
使用H5 Canvas 在微信中合成海报（背景+logo+昵称）

				
			

			

				

					吉祥的CSDN
				

				

					03-04
					
					1870
					
				

			

		

		

			
				
粗糙版，在微信里可以扫描-可以保存图片。

先上传，具体优化等之后版本

效果如图：




&lt;template&gt;
    &lt;div class="share_model" v-on:click="showModel(false)" v-show="isShow" :style="mainStyle"&gt;
         &lt;img :src="img

			
		

	





	

		

			

				
					
基于js的原生插件：canvas绚丽的动态气泡背景

				
			

			

				

					sumimg的博客
				

				

					08-25
					
					324
					
				

			

		

		

			
				
本文转载自：https://blog.csdn.net/qq_42618566/article/details/103408597

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js</title>
</head>
<body>


  <script src="https://cdn.jsdelivr.

			
		

	





	

		

			

				
					
canvas动画效果之星球守护

				
			

			

				

					Jour的博客
				

				

					08-31
					
					3546
					
				

			

		

		

			
				
代码文件


如题，我取了个比较炫酷的名字——星球守护。其实呢，也就是一个简单的射击小游戏。作者并不是我，具体的效果可以去这里体验。我对代码做了部分修改与注释，并且添加了爆炸音效，和游戏结束音效。





ok!接下来我们就来一步一步的介绍这个游戏完成过程。

1.文件结构及静态资源介绍

文件结构简单到令人发指
--css                   //c

			
		

	





	

		

			

				
					
canvas擦拭效果-刮刮卡

				
			

			

				

					weixin_30355437的博客
				

				

					05-12
					
					89
					
				

			

		

		

			
				
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>刮刮卡</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal...

			
		

	





	

		

			

				
					
Canvas学习-图片操作

				
			

			

				

					haitunxiaomo的专栏
				

				

					04-14
					
					215
					
				

			

		

		

			
				
在Canvas中，我们不仅可以绘制各种形状的图形，还可以将图片导入到Canvas中进行各种操作，例如平铺、切割、像素处理等。

下面这整理的学习代码笔记


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport...

			
		

	





	

		

			

				
					
HTML5 Canvas 八星聚义动态效果

				
			

			

				

					weixin_33972649的博客
				

				

					09-04
					
					152
					
				

			

		

		

			
				
昔有石碣村七星聚义，今有Canvas八星聚义。动态效果是，八颗星以等速螺线慢慢向中心聚集，最后汇聚成一颗。
效果：




代码：

&lt;!DOCTYPE html&gt;
&lt;html lang="utf-8"&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
..

			
		

	





	

		

			

				
					
canvas粒子动画(vue)

				
			

			

				

					weixin_33890526的博客
				

				

					08-24
					
					2246
					
				

			

		

		

			
				
由于知乎的粒子动画最近很火，而网上的教程大多都是jQuery的，所以我改成了最近流行vue版本。代码具体的含义我就不多做注释了可以参考http://blog.csdn.net/woosido123/article/details/72770612 这个人的博客，他已经写的很详细了我就不做重复的工作了，修改成...

			
		

	





	

		

			

				
					
html2canvas 让宽高等比例缩小

					
最新发布

				
			

			

				

					01-12
				

			

		

		

			
				
html2canvas是一个将HTML页面转换为canvas图像的JavaScript库，它可以帮助我们实现将HTML元素截图并生成图像文件的功能。如果要让html2canvas实现宽高等比例缩小的效果，可以通过以下方式实现：

首先，我们需要获取HTML元素的原始宽度和高度。可以使用JavaScript的getElementById()或者getElementsByClassName()等方法获取到需要截图的HTML元素。

然后，我们可以通过计算来确定缩小比例。假设原始宽度为w，原始高度为h，缩小比例为s。我们可以通过设定一个固定值或者根据需要缩小的尺寸来确定s的值。比如说，如果我们希望缩小到原始尺寸的一半，那么s可以设定为0.5。

接下来，我们可以使用html2canvas的scael选项来设置缩放比例。可以将s的值传递给该选项，这样就可以让html2canvas在截图时按照等比例缩小的方式生成图像。

最后，我们可以使用html2canvas将HTML元素转换为canvas图像，并保存为图片文件。可以使用toDataURL()方法将canvas图像以Base64的格式导出，然后可以通过将Base64字符串转换为Blob对象，最后将Blob对象保存为图片文件。

综上所述，要让html2canvas实现宽高等比例缩小，我们需要获取原始尺寸、确定缩小比例、设置缩放选项，最后将截图保存为图片文件。这样就可以实现让HTML元素按照宽高等比例缩小的效果了。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值