javascript學習記錄——canvas元素的基本操作
canvas元素
總：canvas元素是javascript中一種繪圖的重要工具
用法：
1，引入<canvas>元素
<canvas id="myCanvas" width="500" height="500" style="border:solid">
你的瀏覽器不支援canvas畫布元素，請更新瀏覽器獲得演示效果。
</canvas>2，獲取上下文
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");第一句話，是通過canvas物件的id來獲取canvas物件
第二句話，獲取2d效果的文字
3，繪製基本圖形
連線：
a，畫線放法
moveTo(x,y)函式：確定線的其實座標，x，y為畫布中的起始座標
lineTo(x,y)函式：確定線的終點座標，x，y為畫布中的起始座標
srtoke()函式：將畫好的座標連線起來
b，線條屬性
strokeStyle：改變線條的顏色
設定方法：
context.strokeStyle = "#F00";//用個十六進位制數表示分別表示紅綠藍的程度
context.strokeStyle = "#FF0000";//用6個十六進位制數分別表示紅綠藍的程度
context.strokeStyle = rgba(255,0,0,1);//前三個參量也是紅綠藍的程度，最後一個參量代表透明度
context.strokeStyle = "red";//用英文來代表顏色
lineWidth：設定線條的寬度，預設值為1
設定方法：
context.lineWidth = 數字（代表寬度）
lineCap()函式：設定線條的頭的形狀，有三種形式"round","square","butt",
設定方法：
context.lineCap = "butt";
lineJoin：設定線條轉角的形狀，有三種形式miter,round,bevel.
設定方法：
context.lineJoin = "miter";
(注：lineJoin屬性為miter時的效果受到miterLimit屬性的影響，miterLimit預設值為10，即外側的延伸時兩條交匯處內角與外角的距離)
以畫正六邊形為例給出示例程式碼：
<!DOCTYPE html>
<html>
<head>
<title>正六邊形</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="250" height="150" style="border:solid">
你的瀏覽器不支援canvas畫布元素，請更新瀏覽器獲得演示效果。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(60,30);//初始點
var k = -60,nowX =60,nowY = 30;
var degToRad = Math.PI/180;
context.strokeStyle = "#FF00FF";//設定線條顏色
context.lineWidth = 5;//設定線條寬度
context.lineJoin = "round";//設定拐點形狀
while(k<270)
{
context.lineTo(nowX,nowY);//描出六邊形的其他各點
k += 60;
nowX = nowX + 60*Math.cos(k*degToRad);
nowY = nowY + 60*Math.sin(k*degToRad);
}
context.closePath();//封閉圖形
context.stroke();//連線
</script>
</body>
</html>
矩形：
rect(x,y,width,height)函式：設定矩形的外框，之後要用stroke()函式連線，x,y代表矩形的坐上角頂點的座標，width和height分別代表寬度和高度
strokeRect(x,y,width,height)函式的效果等於rect() + stroke()
fill()函式，將閉合圖形內部進行塗色，預設為黑色，可以通過fillStyle函式進行顏色設定，設定方法與strokeStyle相同
fillRect(x,y,width,height)函式=rect() + fill()
clearRect(x,y,width,height)函式可以在已經畫好的圖形中間掏出一個空白空間，同樣要配合stroke()函式使用
樣例程式碼：
<!DOCTYPE HTML>
<HTML>
<head>
<title>幾種矩形的繪製方法</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:solid">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(10,10,50,50);
context.stroke();
context.strokeRect(70,10,50,50);
context.fillStyle = "#FF00FF";
context.fillRect(10,70,50,50);
context.fillStyle = "#FF0000";
context.fillRect(70,70,50,50);
context.clearRect(80,80,30,30);
context.stroke();
</script>
</body>
</HTML>執行效果：
圓與圓弧：
arc(x,,y,r,startA,endA,direction)函式：其中x，y代表圓心的位置，r代表半徑，後面兩個引數代表開始角度和結束角度，最後一個引數，代表畫圓的方向是順時針還是逆時針。該函式要搭配stroke()來使用，注意其中角度是弧度制|！
樣例程式碼（繪製奧運五環）：
<!DOCTYPE html>
<html>
<head>
<title>奧運五環</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:solid">
你的瀏覽器不支援canvas畫布元素，請更新瀏覽器獲得演示效果。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var degToRad = Math.PI/180;
context.lineWidth = 5;
context.beginPath();
context.strokeStyle = "blue";
context.arc(100,80,50,0,360*degToRad,true);
context.stroke();
context.beginPath();
context.strokeStyle = "black";
context.arc(210,80,50,0,360*degToRad,true);
context.stroke();
context.beginPath();
context.strokeStyle = "red";
context.arc(320,80,50,0,360*degToRad,true);
context.stroke();
context.beginPath();
context.strokeStyle = "yellow";
context.arc(155,145,50,0,360*degToRad,true);
context.stroke();
context.beginPath();
context.strokeStyle = "green";
context.arc(265,145,50,0,360*degToRad,true);
context.stroke();
</script>
</body>
</html>
執行效果：
繪製文字：
fillText(text,x,y,maxWidth)函式和strokeText(text,x,y,maxWidth)函式：用來繪製文字，前者繪製的文字為空心字，後者為實心，引數text為文字內容，x，y為文字開始座標，maxWidth為最大寬度，要是文字的內容超過最大寬度，會自動壓縮到該寬度。
font可以設定字型大小和字型風格，例如：
context.font = "30px 宋體";
context.font = "40px 微軟雅黑";
注：系統預設字型大小為10px
文字的粗細和傾斜：
表示粗細有四種屬性值：normal（正常）、bold（粗體）、bolder（加粗體）、lighter（細柔）
設定方法例如：
context.font = "normal 30px 宋體";
context.font = "bold 40px 微軟雅黑";
也可以用數字來直接設定：
context.font = "200 30px 宋體";
context.font = "400 40px 微軟雅黑";
表示傾斜的有三種屬性值：normal、italic、oblique，其中後兩者能讓字型傾斜，italic是指文字的傾斜體，oblique是指傾斜的文字，但效果基本一樣。
樣例程式碼：
<!DOCTYPE html>
<html>
<head>
<title>文字1</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="350" height="200" style="border:solid">
你的瀏覽器不支援canvas畫布元素，請更新瀏覽器獲得演示效果。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "30px Arial";
context.fillText("Hello World!", 20, 30);
context.font = "bold 30px Arial";
context.fillText("Hello World!(bold)", 20, 70);
context.font = "italic 30px Arial";
context.fillText("Hello World!(italic)", 20, 110);
context.font = "oblique 30px Arial";
context.fillText("Hello World!(oblique)", 20, 150);
context.font = "600 italic 30px Arial";
context.fillText("Hello World!(600 italic)", 20, 190);
</script>
</body>
</html>
執行效果：
文字的對齊方式：
textAlign屬性：修改文字的對齊方式，有五個屬性：start，end，left，right，center。
textBaseline屬性：修改文字的對齊基線，有6個屬性：alphabetic,top,bottom,middle,hanging,ideographic。
樣例程式碼：
<!DOCTYPE html>
<html>
<head>
<title>文字對齊方式</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="350" height="250" style="border:solid">
你的瀏覽器不支援canvas畫布元素，請更新瀏覽器獲得演示效果。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 2;
context.beginPath();
context.moveTo(170, 10);
context.lineTo(170, 230);
context.stroke();
context.font = "30px Arial";
context.textAlign = "start";
context.fillText("Hello World!", 170, 50);
context.textAlign = "end";
context.fillText("Hello World!", 170, 90);
context.textAlign = "left";
context.fillText("Hello World!", 170, 130);
context.textAlign = "right";
context.fillText("Hello World!", 170, 170);
context.textAlign = "center";
context.fillText("Hello World!", 170, 210);
</script>
</body>
</html>
執行效果：
樣例程式碼：
<!DOCTYPE html>
<html>
<head>
<title>文字對齊基線</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="400" height="250" style="border:solid">
你的瀏覽器不支援canvas畫布元素，請更新瀏覽器獲得演示效果。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 2;
context.beginPath();
context.moveTo(10, 50);
context.lineTo(390, 50);
context.moveTo(10, 120);
context.lineTo(390, 120);
context.moveTo(10, 190);
context.lineTo(390, 190);
context.stroke();
context.font = "30px Arial";
context.textBaseline = "bottom";
context.fillText("Hello World!", 20, 50);
context.textBaseline = "top";
context.fillText("Hello World!", 220, 50);
context.textBaseline = "ideographic";
context.fillText("Hello World!", 20, 120);
context.textBaseline = "hanging";
context.fillText("Hello World!", 220, 120);
context.textBaseline = "alphabetic";
context.fillText("Hello World!", 20, 190);
context.textBaseline = "middle";
context.fillText("Hello World!", 220, 190);
</script>
</body>
</html>
執行效果：
至此，javascript中的canvas元素的基礎功能就基本說完了。