通过一个html页面学习Js_js 打印artcode-CSDN博客

本文链接：https://blog.csdn.net/wp4398151/article/details/7349951
学习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.οnlοad=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 οnlοad="init()">
	<h3>可以直接用鼠标在Canvas画图</h3>
	<hr/><div id="iconsle"></div>
	<button id="btn1">测试移动矩形</button>
	<button id="btn2" οnclick="drawPath()">测试路径</button>
	<button id="btn3" οnclick="drawArc()">测试绘制弧</button>
	<button id="btn4" οnclick="drawBezier()">BezierCurve</button>
	<button id="btn5" οnclick="testText()">Text</button>
	<button id="btn6" οnclick="testDrawImg()">testDrawImg</button>
	<button οnclick="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>