canva基礎學習（一）

何燁坪Echo發表於2016-05-24


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
			你當前的瀏覽器不支援canvas，請更換瀏覽器再試。
		</canvas>
		
		<script>
			
			window.onload = function(){
				var canvas = document.getElementById("canvas");
				
				canvas.width = 800;
				canvas.height = 800;
				
				var context = canvas.getContext("2d");
				
				context.lineWidth = 50;
				context.strokeStyle = "#005588";
				
				context.beginPath();
				context.moveTo(100,200);
				context.lineTo(700,200);
				context.lineCap = "butt";
				context.stroke();
				
				context.beginPath();
				context.moveTo(100,400);
				context.lineTo(700,400);
				context.lineCap = "square";
				context.stroke();
				
				context.beginPath();
				context.moveTo(100,600);
				context.lineTo(700,600);
				context.lineCap = "round";
				context.stroke();
				
				context.lineWidth = 1;
				context.strokeStyle ="#27a";
				context.moveTo(100,100);
				context.lineTo(100,700);
				context.moveTo(700,100);
				context.lineTo(700,700);
				context.stroke();
				
			}
			
		</script>
	</body>
</html>

執行結果如下： 




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
			你當前的瀏覽器不支援canvas，請更換瀏覽器再試。
		</canvas>
		
		<script>
			window.onload = function(){
				
				var canvas = document.getElementById("canvas");
				
				canvas.height = 800;
				canvas.width = 800;
				
				var context = canvas.getContext("2d");
				
				drawRect(context, 100, 100, 400, 400, 10, "#058", "bisque");
				drawRect2(context, 300, 300, 400, 400, 10, "#058", "rgba(0,255,0,0.5)");
				
			}
			
			function drawRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
				
				cxt.beginPath();
				cxt.rect(x, y, width, height);
				cxt.closePath();
				
				cxt.lineWidth = borderWidth;
				cxt.fillStyle = fillColor;
				cxt.strokeStyle = borderColor;
				
				cxt.fill();
				cxt.stroke();
				
			}
			
			function drawRect2(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
				
				cxt.lineWidth = borderWidth;
				cxt.fillStyle = fillColor;
				cxt.strokeStyle = borderColor;
				
				cxt.beginPath();
				cxt.fillRect(x, y, width, height);
				cxt.beginPath();
				cxt.strokeRect(x, y, width, height);
				
				
			}
				
		</script>
		
	</body>
</html>

執行結果如下：



<span style="font-size:10px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
			你當前的瀏覽器不支援canvas，請更換瀏覽器再試。
		</canvas>
		
		<script>
			
			window.onload = function(){
				var canvas = document.getElementById("canvas");
				
				canvas.width = 800;
				canvas.height = 800;
				
				var context = canvas.getContext("2d");
				
				context.lineWidth = 50;
				context.strokeStyle = "#005588";
				
				context.beginPath();
				context.moveTo(100,200);
				context.lineTo(700,200);
				context.lineCap = "butt";//這是正常的
				context.stroke();
				
				context.beginPath();
				context.moveTo(100,400);
				context.lineTo(700,400);
				context.lineCap = "square";//線條兩端是長方形的
				context.stroke();
				
				context.beginPath();
				context.moveTo(100,600);
				context.lineTo(700,600);
				context.lineCap = "round";<span style="font-family:Arial, Helvetica, sans-serif;">//線條兩端是圓弧形的</span></span><span style="font-size:10px;">
				context.stroke();
				
				context.lineWidth = 1;
				context.strokeStyle ="#27a";
				context.moveTo(100,100);
				context.lineTo(100,700);
				context.moveTo(700,100);
				context.lineTo(700,700);
				context.stroke();
				
			}
			
		</script>
	</body>
</html></span><span style="font-size:18px;">
</span>


執行結果如下：



下面的這種方式畫矩形更加簡單：



以下例子裡定義了一個函式drawStar，裡面的引數都是可以隨意改變的，從而會得到各種各樣的圖形，還有一個引數rot是用來旋轉的，定義圖形選裝的角度：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
			你當前的瀏覽器不支援canvas，請更換瀏覽器再試。
		</canvas>
		
		<script>
			window.onload = function(){
				var canvas = document.getElementById("canvas");
				
				canvas.width = 800;
				canvas.height = 800;
				
				var context = canvas.getContext("2d");
				
				context.lineWidth = 10;
				context.strokeStyle = "gold";
				drawStar(context, 150,300,400,400,-40);
				
			}
			function drawStar(cxt, r, R, x, y, rot){
				cxt.beginPath();
				for(var i = 0; i < 5; i ++){
					cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
						   		-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
					cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
						   		-Math.sin((54+i*72-rot)/180*Math.PI)*r+y)
				}
				cxt.closePath();
				cxt.stroke();
				}
				
		</script>
		
	</body>
</html>

執行結果如下：



相關文章