html5-learning-003-canvas(2)-绘制图形

最新推荐文章于 2024-10-30 20:01:39 发布

tdoly

最新推荐文章于 2024-10-30 20:01:39 发布

阅读量602

点赞数

分类专栏： html5 文章标签： html5 function exception 图形 360

本文链接：https://blog.csdn.net/tdoly/article/details/7838199

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

矩形

fillRect(x, y, width, height)

:Draws a filled rectangle at position x,y for width and height.

fillRect(0, 0, 10, 20)在坐标轴0, 0的位置，绘制一个填充满了的宽为10，高为20的矩形。

strokeRect(x, y, width, height)

:Draws a rectangular outline at position x,y for width and height.The makes use of the current strokeStyle,lineWidth,lineJoin,and miterLimit.

strokeRect(0, 0, 10, 20)在坐标轴0, 0的位置，绘制一个宽为10，高为20 的轮廓。

clearRect(x, y, width, height)

:Clears the specified area and makes it fully transparent starting at position x,y for width and height.

clearRect(0, 0, 5, 5)在指定区域，清理出一个宽为5，高为5的完全透明的矩形。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

:Draws circle

context.arcTo(x1, y1, x2, y2, radius)

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

context.quadraticCurveTo(cpx, cpy, x, y)

eg1:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Create Drawing</title>
	<script src="modernizr-1.6.min.js"></script>
	<script type="text/javaScript">
		window.addEventListener("load", eventWindowLoaded, false);
		
		var Debugger = function() {};
		Debugger.log = function(message) {
			try {
				console.log(message);
			} catch(exception) {
				return;
			}
		}
		
		function eventWindowLoaded() {
			canvasApp();
		}
		
		function canvasSupport() {
			return Modernizr.canvas;
		}
		
		function canvasApp() {
		
			if(!canvasSupport) {
				return;
			}
			
			var theCanvas = document.getElementById("oneCanvas");
			var context = theCanvas.getContext("2d");
			
			Debugger.log("Drawing");
			
			function drawScreen() {
				
				//绘制矩形
				context.fillStyle = '#000000';
				context.strokeStyle = '#ff00ff';
				context.lineWidth = 2;
				context.fillRect(20, 20, 40, 40);
				context.strokeRect(10, 10, 60 , 60);
				context.clearRect(30, 30, 20, 20);
				
				//绘制直线
				context.strokeStyle = "black";
				context.lineWidth = 5;
				context.lineCap = 'square';
				context.beginPath();
				context.moveTo(10, 80);
				context.lineTo(100, 80);
				context.stroke();
				context.closePath();
				
				//绘制折线
				context.lineJoin = 'round';
				context.lineCap = 'butt';
				context.beginPath();
				context.moveTo(10, 100);
				context.lineTo(35, 100);
				context.lineTo(35, 125);
				context.stroke();
				context.closePath();
				
				//绘制圆
				context.beginPath();
				context.strokeStyle = "black";
				context.lineWidth = 5;
				//basic circle
				context.arc(30, 150, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);
				context.stroke();
				context.closePath();
				
				//one-quarter circle
				context.beginPath();
				context.strokeStyle = "black";
				context.lineWidth = 5;
				context.arc(70, 150, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);
				context.stroke();
				context.closePath();
				
				//three-fourths circle
				context.beginPath();
				context.strokeStyle = "black";
				context.lineWidth = 5;
				context.arc(130, 150, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);
				context.stroke();
				context.closePath();
				
				//actTo
				context.beginPath();
				context.strokeStyle = "black";
				context.lineWidth = 5;
				context.moveTo(100, 0);
				context.lineTo(300, 400);
				context.arcTo(350, 350, 100, 100, 20);
				context.stroke();
				context.closePath();
				
				//quadratic Bezier curve
				context.beginPath();
				context.strokeStyle = "black";
				context.lineWidth = 5;
				context.moveTo(0, 0);
				context.quadraticCurveTo(100, 25, 0, 50);
				context.stroke();
				context.closePath();
				
				// Bezier curve with two control points
				context.beginPath();
				context.strokeStyle = "black";
				context.lineWidth = 5;
				context.moveTo(150, 0);
				context.bezierCurveTo(0, 125, 300, 175, 150, 300);
				context.stroke();
				context.closePath();
			}
			
			drawScreen();
		}
		
	</script>
</head>

<body>
	<div style="position: absolute; top: 50px; heigh: 50px">
		<canvas id="oneCanvas" height="700" width="800">
			Your brower does not support HTML5.
		</canvas>
	</div>
</body>

</html>

eg2:

绘制 “TDOLY"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Create Drawing</title>
	<script src="modernizr-1.6.min.js"></script>
	<script type="text/javaScript">
		window.addEventListener("load", eventWindowLoaded, false);
		
		var Debugger = function() {};
		Debugger.log = function(message) {
			try {
				console.log(message);
			} catch(exception) {
				return;
			}
		}
		
		function eventWindowLoaded() {
			canvasApp();
		}
		
		function canvasSupport() {
			return Modernizr.canvas;
		}
		
		function canvasApp() {
		
			if(!canvasSupport) {
				return;
			}
			
			var theCanvas = document.getElementById("oneCanvas");
			var context = theCanvas.getContext("2d");
			
			Debugger.log("Drawing");
			
			function drawScreen() {
				
				//drawing "TDOLY"
				
				context.strokeStyle = '#ff00ff';
				context.lineWidth = 5;
				context.lineCap = 'butt';
				context.lineJoin = 'round';
				context.shadowBlur = 4;
				context.shadowColor = '#909090';
				context.shadowOffsetX = 1;
				context.shadowOffsetY =1;
				
				//drawing "T"
				context.beginPath();
				context.moveTo(20, 10);
				context.lineTo(70, 10);
				context.moveTo(46, 10)
				context.lineTo(46, 60);
				context.stroke();
				context.save();
				
				//drawing "D"
				context.moveTo(90, 8);
				context.lineTo(90, 60);
				context.save();
				context.moveTo(90 ,30)
				context.arc(100, 33, 28, (Math.PI/180)*112, (Math.PI/180)*250, true);
				context.stroke();
				
				//drawing "O"
				context.moveTo(198, 33);
				context.arc(170, 33, 25, (Math.PI/180)*0, (Math.PI/180)*360, false);
				context.stroke();
				context.save();
				
				//drawing "L"
				context.moveTo(220, 10);
				context.lineTo(220, 60);
				context.lineTo(250, 60);
				context.stroke();
				context.save();
				
				//drawing "Y"
				context.moveTo(260, 10);
				context.lineTo(280, 30);
				context.lineTo(300, 10);
				context.moveTo(280, 30);
				context.lineTo(280, 65);
				context.stroke();
				context.closePath();
				
			}
			
			drawScreen();
		}
		
	</script>
</head>

<body>
	<div style="position: absolute; top: 50px; heigh: 50px">
		<canvas id="oneCanvas" height="700" width="1000">
			Your brower does not support HTML5.
		</canvas>
	</div>
</body>

</html>