一、一些概念
1、canvas座標
canvas中的座標是從左上角開始的,x軸沿着水平方向(按像素)向右延伸,y軸沿垂直方向向下延伸。左上角座標是x=0，y=0的點稱作原點。
2、canvas中所有的操作都是通過上下文對象來完成的，我們實際操作的是畫布所提供的上下文對象。對上下文的很多操作都不會立即反映到頁面上，只有當對路徑應用繪製(stroke)或填充(fill)方法時，結果纔會顯示出來。
二、應用:在canvas中繪製一條對角線
<!DOCTYPE html>
<html>
<!--在頁面中加入Canvas-->
<canvas id="diagonal" width="200" height="200" style="border:1px solid;"></canvas>
<!--在canvas中繪製一條對角線-->
<script>
//取得canvas元素及其繪圖上下文
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
//使用普通方法創建對角線
function drawDiagonal()
{
//用絕對座標來創建一條路徑
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
//將這條線繪製到canvas上
context.stroke();
}
//使用變換創建對角線
function drawDiagonal2()
{
//保存當前繪圖狀態(在變換前保存context狀態可以方便以後恢復)
context.save();
//向右下方移動繪圖上下文(當平移行爲發生時,我們提供的變換座標會被加到結果座標上)
context.translate(70,140);
//以原點爲起點繪製與前面相同的線段
context.beginPath();
context.moveTo(0,0);
context.lineTo(70,-70);
//將這條線繪製到canvas上
context.stroke();
//恢復原有的繪圖狀態
context.restore();
}
window.addEventListener("load",drawDiagonal2,true);
</script>
</html>
