html_canvas（下）

最新推荐文章于 2023-09-18 08:09:04 发布

星宇非凡

最新推荐文章于 2023-09-18 08:09:04 发布

阅读量113

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_42595216/article/details/101314703

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

参考内容：妙味课堂

canvas

//获取像素
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oGC.fillRect( 0,0,100,100 );
//.getImageData => 得到一个区域里的所有像素
var oImg = oGC.getImageData(0,0,100,100);

/*alert( oImg.width );  //一行的像素个数		100
alert( oImg.height );  //一列的像素个数		100
alert( oImg.data.length );  //整体像素的数组集合	40000*/

/*alert( oImg.data[0] );  //0 - 255 黑色到白色	0
alert( oImg.data[1] );  //0 - 255 黑色到白色 	0
alert( oImg.data[2] );  //0 - 255 黑色到白色	0
alert( oImg.data[3] );  //0 - 255 透明到不透明		255*/

for(var i=0;i<oImg.width*oImg.height;i++){
	oImg.data[4*i] = 255;
	oImg.data[4*i+1] = 0;
	oImg.data[4*i+2] = 0;
	oImg.data[4*i+3] = 100;	
}
//.putImageData(对象，对象的横坐标，对象的纵坐标)
oGC.putImageData(oImg,100,100);

var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');			
var oImg = oGC.createImageData(100,100);

for( var i = 0; i < oImg.width*oImg.height; i ++ ){				
	oImg.data[4*i] = 255;
	oImg.data[4*i+1] = 0;
	oImg.data[4*i+2] = 0;
	oImg.data[4*i+3] = 100;
	//超过255算255，小于0算0
}				
oGC.putImageData(oImg,100,100);

//封装getXY函数获取像素，setXY函数设置像素
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oGC.fillRect(0,0,100,100);

var oImg = oGC.getImageData(0,0,100,100);
//alert(getXY(oImg,3,5));
for(var i=0;i<oImg.width;i++){
	setXY( oImg,i,5,[255,0,0,255] );
}

oGC.putImageData(oImg,100,100);

function getXY(obj,x,y){					
	var w = obj.width;
	var h = obj.height;
	var d = obj.data;					
	var color = [];
	
	color[0] = d[4*(x+y*w)];
	color[1] = d[4*(x+y*w)+1];
	color[2] = d[4*(x+y*w)+2];
	color[3] = d[4*(x+y*w)+3];
	
	return color;			
}

function setXY(obj,x,y,color){					
	var w = obj.width;
	var h = obj.height;
	var d = obj.data;
	
	d[4*(x+y*w)] = color[0];
	d[4*(x+y*w)+1] = color[1];
	d[4*(x+y*w)+2] = color[2];
	d[4*(x+y*w)+3] = color[3];			
}

//打码
window.onload = function(){
	var oC = document.getElementById('c1');
	var oGC = oC.getContext('2d');			
	var yImg = new Image();			
	yImg.onload = function(){			
		draw(this);
		
	};		
	yImg.src = '2.jpg';
	
	function draw(obj){
		oC.width = obj.width;
		oC.height = obj.height*2;
		oGC.drawImage(obj,0,0);
		
		var oImg = oGC.getImageData(0,0,obj.width,obj.height);				
		var w = oImg.width;
		var h = oImg.height;			
		var num = 3;			
		var newImg = oGC.createImageData(obj.width,obj.height);
		//将图片划分为长，宽为stepH，stepW的正方形块，调节步长num可改变打码力度
		var stepW = w/num;
		var stepH = h/num;
		
		for(var i=0;i<stepH;i++){
			for(var j=0;j<stepW;j++){
				//从每个正方形块中随机取出一个像素
				var color = getXY(oImg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));					
				for(var k=0;k<num;k++){
					for(var l=0;l<num;l++){
						setXY(newImg,j*num+l,i*num+k,color);
					}
				}					
			}
		}		
		oGC.putImageData(newImg,0,obj.height);			
	}
	
	function getXY(obj,x,y){ //针对一行一列进行操作
		
		var w = obj.width;
		var h = obj.height;
		var d = obj.data;			
		var color = [];
		
		color[0] = d[4*(y*w+x)];
		color[1] = d[4*(y*w+x)+1];
		color[2] = d[4*(y*w+x)+2];
		color[3] = d[4*(y*w+x)+3];
		
		return color;			
	}
	
	function setXY(obj,x,y,color){
		var w = obj.width;
		var h = obj.height;
		var d = obj.data;
					
		d[4*(y*w+x)] = color[0];
		d[4*(y*w+x)+1] = color[1];
	 	d[4*(y*w+x)+2] = color[2];
		d[4*(y*w+x)+3] = color[3];		
	}	
};
</script>

//像素显字
<script>
	window.onload = function(){
		
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');
		
		var aLi = document.getElementsByTagName('li');
		
		for( var i = 0; i < aLi.length; i ++ ){
			
			aLi[i].onclick = function(){
				
				var str = this.innerHTML;
				var h = 180;
				
				oGC.clearRect(0,0,oC.offsetWidth,oC.offsetHeight);
				oGC.font = h + 'px impact';
				oGC.textBaseline = 'top';
				oGC.fillStyle = 'red';
				
				var w = oGC.measureText(str).width;
				oGC.fillText(str,(oC.width-w)/2,(oC.height-h)/2);
				
				var oImg = oGC.getImageData((oC.width-w)/2,(oC.height-h)/2,w,h);
				oGC.clearRect(0,0,oC.offsetWidth,oC.offsetHeight);
				var arr = randomArr(w*h,w*h/10);						
				var newImg = oGC.createImageData(w,h);
				
				for( var i = 0; i < arr.length; i ++ ){
					newImg.data[4*arr[i]] = oImg.data[4*arr[i]];
					newImg.data[4*arr[i]+1] = oImg.data[4*arr[i]+1];
					newImg.data[4*arr[i]+2] = oImg.data[4*arr[i]+2];
					newImg.data[4*arr[i]+3] = oImg.data[4*arr[i]+3];
					
				}
				oGC.putImageData(newImg,(oC.width-w)/2,(oC.height-h)/2);
			}
		
		}
	
		function randomArr(iAll,iNow){					
			var arr = [];
			var newArr = [];				
			for( var i = 0; i < iAll; i ++ ){
				arr.push(i);
			}
			for( var i = 0; i < iNow; i ++ ){
				newArr.push( arr.splice(Math.floor(Math.random()*arr.length),1) );
			}
			return newArr;
		}		
	}
</script>
<body>
	<canvas id="c1" width="400" height="400"></canvas>
	<ul style="float:left;">
		<li>妙</li>
	    <li>味</li>
	    <li>课</li>
	    <li>堂</li>
	</ul>
</body>

//动态像素显字
<script>
	window.onload = function(){				
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			
		var aLi = document.getElementsByTagName('li');
	
		for( var i = 0; i < aLi.length; i ++ ){				
			aLi[i].onclick = function(){						
				var str = this.innerHTML;
				var h = 180;
				var timer = null;
				clearInterval(timer);
				var iNow = 0;
				
				oGC.clearRect(0,0,oC.offsetWidth,oC.offsetHeight);
				oGC.font = h + 'px impact';
				oGC.textBaseline = 'top';
				oGC.fillStyle = 'red';
				
				var w = oGC.measureText(str).width;
				oGC.fillText(str,(oC.width-w)/2,(oC.height-h)/2);				
				var oImg = oGC.getImageData((oC.width-w)/2,(oC.height-h)/2,w,h);
				oGC.clearRect(0,0,oC.offsetWidth,oC.offsetHeight);
				var arr = randomArr(w*h,w*h/10);					
				var newImg = oGC.createImageData(w,h);
				
				timer = setInterval(function(){
					for( var i = 0; i < arr[iNow].length; i ++ ){
						newImg.data[4*arr[iNow][i]] = oImg.data[4*arr[iNow][i]];
						newImg.data[4*arr[iNow][i]+1] = oImg.data[4*arr[iNow][i]+1];
						newImg.data[4*arr[iNow][i]+2] = oImg.data[4*arr[iNow][i]+2];
						newImg.data[4*arr[iNow][i]+3] = oImg.data[4*arr[iNow][i]+3];							
					}
					oGC.putImageData(newImg,(oC.width-w)/2,(oC.height-h)/2);						
					if(iNow == 9){
						iNow = 0;
						clearInterval(timer);
					}else{
						iNow ++;
					}						
				},200);					
			}		
		}	
		function randomArr(iAll,iNow){			
			var arr = [];
			var allArr = [];
			
			for( var i = 0; i < iAll; i ++ ){
				arr.push(i);
			}
			for( var j = 0; j < iAll/iNow; j ++ ){			
				var newArr = [];
				for( var i = 0; i < iNow; i ++ ){
					newArr.push( arr.splice(Math.floor(Math.random()*arr.length),1) );
				}
				allArr.push(newArr);
			}	
			return allArr;
		}
	}
</script>

var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oGC.fillRect(0,0,100,100);

oGC.fillStyle = 'red';
oGC.globalAlpha = 0.5;

oGC.fillRect(50,50,100,100);

//合成
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oGC.fillRect(0,0,100,100);

oGC.fillStyle = 'red';

oGC.globalCompositeOperation = 'xor';

oGC.fillRect(50,50,100,100);

//导出
<script>
	window.onload = function(){
		var oImg = document.getElementById('img1');
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');
		
		oGC.fillRect(0,0,100,100);
		
		oGC.fillStyle = 'red';
		oGC.globalCompositeOperation = 'xor';

		oGC.fillRect(50,50,100,100);
		
		//导出
		oImg.src = oC.toDataURL();

	};
</script>
<body>
	<canvas id="c1" width="400" height="400"></canvas>
	<img id="img1" src="" />
</body>

var oImg = document.getElementById('img1');
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
		
oGC.beginPath();
oGC.arc( 100,100,50,0,360*Math.PI/180,false );
oGC.closePath();
oGC.fill();

oC.onmousedown = function(ev){
	
	var ev = ev || event;
	var x = ev.clientX - oC.offsetLeft;
	var y = ev.clientY - oC.offsetTop;
	
	if( oGC.isPointInPath(x,y) ){
		alert(123);
	}				
}

<script>
window.onload = function(){
	var oImg = document.getElementById('img1');
	var oC = document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	var c1 = new Shape(100,100,50);
	var c2 = new Shape(200,200,50);
	
	function Shape(x,y,r){
		this.x = x;
		this.y = y;
		this.r = r;
		//此段不写的话，页面加载时不出现，只有点下时才出现
		oGC.beginPath();
		oGC.arc( this.x,this.y,this.r,0,360*Math.PI/180,false );
		oGC.closePath();
		oGC.fill();
	}
	
	Shape.prototype.reDraw = function(point){					
		oGC.beginPath();
		oGC.arc( this.x,this.y,this.r,0,360*Math.PI/180,false );
		oGC.closePath();
		oGC.fill();
		if( oGC.isPointInPath(point.x,point.y) ){
			this.click();
		}
	}
	
	c1.click = function(){
		alert(123);
	}
	c2.click = function(){
		alert(456);
	}
	
	oC.onmousedown = function(ev){					
		var ev = ev || event;
		var point={
			x : ev.clientX - oC.offsetLeft,
			y : ev.clientY - oC.offsetTop
		}					
		c1.reDraw(point);
		c2.reDraw(point);				
	}			
}
</script>

星宇非凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html_canvas（下）

参考内容：妙味课堂canvas//获取像素var oC = document.getElementById('c1');var oGC = oC.getContext('2d');oGC.fillRect( 0,0,100,100 );//.getImageData => 得到一个区域里的所有像素var oImg = oGC.getImageData(0,0,100,1...
复制链接

扫一扫

专栏目录