html5之canvas的应用1 _HTML/CSS

html5之canvas的使用1
html5比html以前的版本，添加好几样标签，比如：<canvas/>,<video/>

引用

<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break

等等。


<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="225">Your browser does not support the canvas tag.</canvas>


<canvas id="myCanvas1" width="500" height="375">Your browser does not support the canvas tag.</canvas>


<canvas id="myCanvas2" width="500" height="600">Your browser does not support the canvas tag.</canvas>



<canvas id="myCanvas3" width="1600" height="900">Your browser does not support the canvas tag.</canvas>

<img id="pic" src="./a.png" alt="beauty" width="400" height="300"/>



<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#AA0000';
ctx.fillRect(100,100,100,100);//前两个是左上角相对浏览器的左上角的位置，后再从个参数是矩形的长宽。


function drawLine(){
			var canvas=document.getElementById('myCanvas1');
			var context=canvas.getContext('2d');
			context.fillStyle='#0AAA00';
			context.fillRect(50,25,180,80);//前两个是左上角相对浏览器的左上角的位置，后再从个参数是矩形的长宽。
			
			context.moveTo(50,100);
			context.lineTo(10,375);
			context.strokeStyle="#000";
			context.stroke();
			
			//下面4行语句，完成一线段的绘画
			context.moveTo(0,0); //起点？
			context.lineTo(500,23);//终点？
			context.strokeStyle="#000";//颜色方案
			context.stroke();//正式绘制
			
			context.font = "bold 50px sans-serif"; //从英文font看，是字体方案
			context.fillText("html5",250,43); //三个参数，第一个串表示要绘画的文字；第二，第三个表示水平，坚直座标。
			
			context.textAlign="right";
			context.textBaseLine="bottom";
			context.fillText("html5",250,190);

}

function drawGradients(){
	
		//渐变
	
		var canvas=document.getElementById('myCanvas2');
		var context=canvas.getContext('2d');
		
//		var my_gradient = context.createLinearGradient(0,0,100,10);
////		my_gradient.addColorStop(0,"black");
////		my_gradient.addColorStop(1,"white");
//		my_gradient.addColorStop(0,"red");
//		my_gradient.addColorStop(1,"blue");
//		context.fillStyle = my_gradient;
//		context.fillRect(0,0,300,255);
//		
	var my_gradient = context.createRadialGradient(0,0,30,50,50,50);
//		my_gradient.addColorStop(0,"black");
//		my_gradient.addColorStop(1,"white");
		my_gradient.addColorStop(0,"red");
		my_gradient.addColorStop(1,"blue");
		context.fillStyle = my_gradient;
		context.fillRect(0,0,300,255);
		
		
		
}

function drawImg(){

		var canvas=document.getElementById('myCanvas3');
		var context=canvas.getContext('2d');
		var pic = document.getElementById("pic");
		context.drawImage(pic,0,0);
}



</script>

<input type="button" onclick="drawLine()" value="drawLine"/>
<input type="button" onclick="drawGradients()" value="drawGradients"/>
<input type="button" onclick="drawImg()" value="drawImg"/>

</body>
</html>