canvas繪圖（下）
1.線條連線樣式
主要有三種連線樣式，分別為miter、round、bevel，設定連線樣式用屬性lineJoin屬性設定，預設情況下預設miter樣式
<html> <head> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("myCanvas"); var context=canvas.getContext("2d"); context.lineWidth=25;//設定線寬度； //左邊是miter樣式 context.beginPath(); context.moveTo(99,150); context.lineTo(149,50); context.lineTo(199,150); context.lineJoin="miter"; context.stroke(); //中間是round樣式 context.beginPath(); context.moveTo(240,150); context.lineTo(283,50); context.lineTo(320,150); context.lineJoin="round"; context.stroke(); //右邊是bevel樣式 context.beginPath(); context.moveTo(380,150); context.lineTo(420,50); context.lineTo(480,150); context.lineJoin="bevel"; context.stroke(); } </script> </head> <body> <canvas id="myCanvas" width="500" height="200"></canvas> </body> </html>
2.繪製圖形及填充
繪製矩形：使用rect()方法，每個矩形需要由左上角座標(x,y)和矩形的寬與高(width,height)來確定。
繪製圓： 畫圓只需要在呼叫arc()方法時，將起始角度設為2*PI即可。
arc(圓心x,圓心y,半徑,開始的角度,結束的角度,是否逆時針）
需要注意的是：這裡的角度是用“弧度”來表示的，一個完整的圓即360度，就是2PI弧度。
所以需要這樣寫：context.arc(100,100,20,0,Math.PI*2);
圖形的顏色填充：要填充圖形，需要用fillStyle屬性設定填充圖形用的顏色，然後使用fill()方法完成對圖形的填充。預設情況 下，fillStyle的顏色是黑色。
<html> <head> <style type="text/css"> #myCanvas{ border: 1px solid blue; background-color: #77ffcc; } </style> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("myCanvas"); var context=canvas.getContext("2d"); //繪製矩形 context.beginPath(); context.rect(10,50,200,100);//四個引數分別表示距離畫布左邊和上邊的距離以及矩形的寬高； context.lineWidth=5; context.strokeStyle="pink";//矩形邊框的顏色 context.stroke(); context.fillStyle="green";//設定填充色 context.fill();//執行填充操作 //繪製圓形 context.beginPath(); //設定圓心 var centerX=380; var centerY=100; var radius=80;//半徑 context.arc(centerX,centerY,radius,0,2*Math.PI,true); context.lineWidth=5; context.strokeStyle="black"; context.stroke(); context.fillStyle="blue"; context.fill(); } </script> </head> <body> <canvas id="myCanvas" width="500" height="200"></canvas> </body>
3.繪製陰影與透明度
要為圖形新增陰影需要以下幾個屬性：
shadowColor:陰影的顏色
shadowBlur:陰影模糊度
shadowOffsetX:設定或返回陰影與形狀的水平距離
shadowOffsetY:設定或返回陰影與形狀的垂直距離
繪製透明度：
使用globalalpha屬性：屬性值必須是介於0.0（完全透明）和1.0（不透明）之間的數字。
<html>
<head>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//繪製矩形
context.beginPath();
context.rect(10,50,200,100);//四個引數分別表示距離畫布左邊和上邊的距離以及矩形的寬高；
context.lineWidth=5;
context.strokeStyle="pink";//矩形邊框的顏色
context.stroke();
context.fillStyle="green";//設定填充色
//設定陰影和透明度
context.shadowColor="black";//陰影顏色
context.shadowBlur=20; //陰影模糊度
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.globalAlpha=0.3;//透明度
context.fill();//執行填充操作
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body> 
4.繪製漸變
線性漸變：首先使用createLinearGradient()方法建立canvasGradient物件，
var grad= content.createLinearGradient(X1,Y1,X2,Y2);其中X1，Y1為漸變的起點，X2，Y2為漸變的終點
然後使用addColorStop方法定義色標的位置並上色
grad.addColor(position,color);其中position為漸變中色標的相對位置（偏移量）
徑向漸變：首先使用createRadialGradient()方法建立canvasGradient物件，語法如下;
var grad=content.createRadialGradient(X1,Y1,R1,X2,Y2,R2)； 其中X1,Y1,R1定義一個以（X1,Y1）為原 點，R1為半徑的圓，X2,Y2,R2定義一個以（X2,Y2）為原點，R2為半徑的圓
然後使用addColorStop方法定義色標的位置並上色
grad.addColor(position,color);其中position為漸變中色標的相對位置（偏移量）
<html>
<head>
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//線性漸變
var clg=context.createLinearGradient(0,0,200,0);
clg.addColorStop(0,"#ff0000");
clg.addColorStop(0.5,"#00ff00");
clg.addColorStop(1,"#0000ff");
context.fillStyle=clg;
context.strokeStyle=clg;
context.fillRect(0,0,260,200);//填充一個矩形區域，前兩個引數代表起始座標（左上角座標，後兩個引數代表填充區域的寬高）
//徑向漸變
var crg=context.createRadialGradient(385,100,20,385,100,100);
crg.addColorStop(0,"#ff0000");
crg.addColorStop(0.5,"#00ff00");
crg.addColorStop(1,"#0000ff");
context.fillStyle=crg;
context.strokeStyle=crg;
context.fillRect(260,0,520,200);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>
5.繪製圖案填充
用上下文物件的createPattern()方法建立一個圖案填充物件，語法如下
context.createPattern(image,type);其中type必須為repeat、repeat-x、repeat-y、no-repeat之一。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
function draw(type){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var img=document.getElementById("butterfly");
var pat=context.createPattern(img,type);//建立一個填充物件
context.rect(0,0,500,200);
context.fillStyle=pat;
context.fill();
}
</script>
</head>
<body>
<p>影象的使用：</p>
<img src="img/Globe.png" id="butterfly" ><br/>
<button onclick="draw('repeat')">repeat</button>
<button onclick="draw('repeat-x')">repeat-x</button>
<button onclick="draw('repeat-y')">repeat-y</button>
<button onclick="draw('no-repeat')">no-repeat</button><br/>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html> 
