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
<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>