html 페이지 를 통 해 Js 배우 기

5385 단어 htmlfunctionimage테스트borderbrowser
HTML 의 Canvas 의 새로운 기능 을 배 웁 니 다.Canvas API 에 따라 자주 사용 되 는 대부분의 특성 에 대한 예 입 니 다.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>  </title>
	<script type="text/javascript">
		var $=function(id)
		{
			return document.getElementById(id);
		}
		
		var ctxt;
		var canvas;
		
		function animationDraw()
		{
			var posx = 0, posy = 0;
			var width = 100, height = 100;
			var tarx = true, tary = true;
			setInterval(function(){ 
				ctxt.clearRect(0, 0, canvas.width, canvas.height);
				ctxt.fillStyle="rgba(0, 0, 255, 0.8)";	//opaque
				
				if(posy <= 0){ tary = true;}else if(posy >= (canvas.height - height)){ tary = false;}
				if(posx <= 0){ tarx = true;}else if(posx >= (canvas.width - width)){ tarx = false;}
				
				if(tary)
					posy++;
				else
					posy--;
				if(tarx)
					posx++;
				else
					posx--;
				drawPath();
				drawArc();
				ctxt.fillRect(posx, posy, height, width);
			
			}, 5);
		}
		
		//arc(x, y, radius, startAngle, endAngle, anticlockwise)
		// x, y    。radiu   ， Angle    0   。
		//var radians = (Math.PI/180)*degrees	
		function drawArc()
		{
			doLog("      ");
			ctxt.beginPath();
			var startAngle = 0;
			var endAngle = (Math.PI/180)*90;
			ctxt.fillStyle="rgba(0, 100, 0, 0.5)";
			ctxt.arc(100, 50, 70, startAngle, endAngle, false);
			ctxt.closePath();
			ctxt.fill();
		}
		
		//drawImage(image, dx, dy)							
		//drawImage(image, dx, dy, dw, dh)					
		//drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)	
		//image = HTMLImageElement | HTMLCanvasElement | HTMLVideoElement
		//dx, dy image     dw,dh image   ，sx, sy image    ,sw, sy image    。
		function testDrawImg()
		{
			var img = new Image()
			img.src = "file:///C:\\test.jpg";
			img.onload=function()
			{
				ctxt.drawImage(img, 100, 100);
			}
		}
		
		function testText()
		{
			doLog("      ");
			ctxt.font = "50px   ";			//  
			ctxt.textAlign = "left";	//    
			ctxt.textBaseline = "middle";		//    
			ctxt.fillText("fill", 10, 100);
			ctxt.strokeText("stroke", 10, 50);
			ctxt.strokeText("abc", 10, 200);
			doLog("abc   "+ctxt.measureText("abc").width);					//        
		}
		
		//quadraticCurveTo(cp1x, cp1y, x, y)     	cp=control point
		//BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)     
		function drawBezier()
		{
			ctxt.beginPath();
			ctxt.moveTo(250, 250);
			ctxt.fillStyle = "rgba(0, 0, 200, 0.5)"
			ctxt.quadraticCurveTo(100, 100, 50, 250);
			ctxt.stroke();
			ctxt.closePath();
			doLog("Bezier");
		}
		
		function drawPath()
		{
			//stroke()		       
			//beginPath()	      
			//closePath()	    ，  
			//fill()		  fillStyle        
			ctxt.beginPath();	//      
			ctxt.moveTo(100, 25);
			ctxt.lineTo(50, 50);
			ctxt.lineTo(200, 250);
			ctxt.lineTo(150, 150);
			ctxt.stroke();
			ctxt.fillStyle="rgba(25, 0, 100, 0.5)";
			ctxt.fill();
			ctxt.closePath();
		}
		
		
		function init()
		{
			canvas = $("MyCanvas");	//     
			
			if(canvas.getContext)
			{
				ctxt = canvas.getContext("2d");
				
				var btn1 = $("btn1");
				
				btn1.addEventListener("click",animationDraw, true);
				
			}else{alert("this browser cann't support Canvas Context");}
		}
		function draw()
		{
			ctxt.fillStyle="rgba(255, 0, 0, 0.2)";
			ctxt.fillRect(0, 0, 100, 100);
			ctxt.fillStyle="rgba(0, 255, 0, 0.5)";
			ctxt.fillRect(50, 50, 150, 150);
			ctxt.fillStyle="rgba(0, 0, 255, 0.8)";	//opaque
			ctxt.fillRect(100, 100, 200, 200);
		}
		
		function doLog(msg)
		{
			$("iconsle").innerHTML = msg;
		}
		
		function doMovie(event)
		{
			doLog(	" absolate x:"+ event.clientX + " y:" + event.clientY + 
					" relative x:" + event.offsetX + " y:" + event.offsetY);
		}
		
		//createImageData(sw, sh);				        imagedata
		//createImageData(imageData);			    imagedata
		//getImageData(sx,sy,sw,sh);			        imagedata
		//imagedata.width						     
		//imagedata.height						     
		//imagedata.data						RGBA     0-255
		//putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])    canvas 
		function doPixel()
		{
			
		}
	</script>
	<style type="text/css">
		canvas { border: 1px solid black; }
	</style>
</head>
<body onload="init()">
	<h3>        Canvas  </h3>
	<hr/><div id="iconsle"></div>
	<button id="btn1">      </button>
	<button id="btn2" onclick="drawPath()">    </button>
	<button id="btn3" onclick="drawArc()">     </button>
	<button id="btn4" onclick="drawBezier()">BezierCurve</button>
	<button id="btn5" onclick="testText()">Text</button>
	<button id="btn6" onclick="testDrawImg()">testDrawImg</button>
	<button onclick="draw();">  </button><br>
	<canvas id="MyCanvas" width="800" height="600" OnMouseMove="doMovie(event)">
	this browser cann't support canvas
	</canvas>
<hr />
<div>
</div>

</body>
</html>
JS 출력 대상 의 속성 및 방법
js http 프로 토 콜 헤더 추가 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage