一開始我們老師安排我做這個作業，在這個作業我遇到了一個很重大的問題就是，文字旋轉這么旋轉，我查了很多資料。
1發現繪畫正方形，使他正方形中心原點旋轉非常容易理解。（我相信這個很多人看一下都會懂,）
1.translate(x,y):平移，將畫布的坐標原點向左右方向移動x，向上下方向移動y.canvas的默認位置是在（0,0）.
例子：畫布原點假如落在（1，1），那么translate（10，10）就是在原點（1，1）基礎上分別在x軸、y軸移動10，則原點變為（11,11）。
2.我來說說怎么轉移到中心點，假如，fillRect(50,50,100,100)的正方形（矩形也是一樣的），坐標在（50，50）建立了一個長，寬各100的正方形，但是呢正方形的中點究竟在那里呢，公式是：cvContent.translate(x+width/2,y+height/2);就能找到中心點了，也就是說cvContent.translate(125,125)才是正方行的中心點，如圖下，找到中心點后直接旋轉就行了。
注意了：正方形之所以能旋轉，有一下這兩個
cvContext.translate(); //
cvContext.rotate(45 * Math.PI/180) //轉成角度的度數，，只要改*前面的數值便可以旋轉。
問題來了：文字旋轉究竟怎么樣？
琢磨了很久，其實很簡單，只是我們的理解方法用錯了，導致本來簡簡單單的文字旋轉，拖我們那么多的時間。
我以中國象棋的棋譜圖為案例，中間一行不是文字嗎。
代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #canvas1{ font-family: arial; } </style> </head> <body> <h3>canvas畫布：首先先設置一塊區域，可以繪制文字或圖形</h3> <div style="border: 1px solid red; width:400px;height: 450px;"> <canvas id="huabu3" width="400px" height="450px" ></canvas> </div> <script type="text/javascript"> //找到畫布的元素 var chiness = document.getElementById("huabu3"); //設置2維繪畫的上下文 var chess = chiness.getContext("2d"); //繪畫直線的上下文 var zhixian = chiness.getContext("2d"); //設置漢字的繪畫上下文，因為如果跟chess混在一起顯示不了文字 var hanzi = chiness.getContext("2d"); chess.strokeStyle = "greenyellow"; zhixian.strokeStyle ="greenyellow"; //先畫第一行的 chess.strokeRect(0,0,400,50); chess.strokeRect(50,0,50,50); chess.strokeRect(100,0,50,50); chess.strokeRect(150,0,50,50); chess.strokeRect(200,0,50,50); chess.strokeRect(250,0,50,50); chess.strokeRect(300,0,50,50); chess.strokeRect(350,0,50,50); //第二行的 chess.strokeRect(0,50,50,50); chess.strokeRect(50,50,50,50); chess.strokeRect(100,50,50,50); chess.strokeRect(150,50,50,50); chess.strokeRect(200,50,50,50); chess.strokeRect(250,50,50,50); chess.strokeRect(300,50,50,50); chess.strokeRect(350,50,50,50); //第三行 chess.strokeRect(0,100,50,50); chess.strokeRect(50,100,50,50); chess.strokeRect(100,100,50,50); chess.strokeRect(150,100,50,50); chess.strokeRect(200,100,50,50); chess.strokeRect(250,100,50,50); chess.strokeRect(300,100,50,50); chess.strokeRect(350,100,50,50); //第四行 chess.strokeRect(0,150,50,50); chess.strokeRect(50,150,50,50); chess.strokeRect(100,150,50,50); chess.strokeRect(150,150,50,50); chess.strokeRect(200,150,50,50); chess.strokeRect(250,150,50,50); chess.strokeRect(300,150,50,50); chess.strokeRect(350,150,50,50); //第六行 chess.strokeRect(0,250,50,50); chess.strokeRect(50,250,50,50); chess.strokeRect(100,250,50,50); chess.strokeRect(150,250,50,50); chess.strokeRect(200,250,50,50); chess.strokeRect(250,250,50,50); chess.strokeRect(300,250,50,50); chess.strokeRect(350,250,50,50); //第7行 chess.strokeRect(0,300,50,50); chess.strokeRect(50,300,50,50); chess.strokeRect(100,300,50,50); chess.strokeRect(150,300,50,50); chess.strokeRect(200,300,50,50); chess.strokeRect(250,300,50,50); chess.strokeRect(300,300,50,50); chess.strokeRect(350,300,50,50); //第8行 chess.strokeRect(0,350,50,50); chess.strokeRect(50,350,50,50); chess.strokeRect(100,350,50,50); chess.strokeRect(150,350,50,50); chess.strokeRect(200,350,50,50); chess.strokeRect(250,350,50,50); chess.strokeRect(300,350,50,50); chess.strokeRect(350,350,50,50); //第9行 chess.strokeRect(0,400,50,50); chess.strokeRect(50,400,50,50); chess.strokeRect(100,400,50,50); chess.strokeRect(150,400,50,50); chess.strokeRect(200,400,50,50); chess.strokeRect(250,400,50,50); chess.strokeRect(300,400,50,50); chess.strokeRect(350,400,50,50); //這是線條布局，我覺得分開寫好一點，不會亂 zhixian.moveTo(150,0); zhixian.lineTo(250,100); zhixian.stroke(); zhixian.moveTo(250,0); zhixian.lineTo(150,100); zhixian.stroke(); zhixian.moveTo(150,450); zhixian.lineTo(250,350); zhixian.stroke(); zhixian.moveTo(250,450); zhixian.lineTo(150,350); zhixian.stroke(); //十字架線條的布局(由於做這個十字甲，根據坐標就可以簡簡單單的做出來了，沒什么技巧性，所我做了一組。) zhixian.moveTo(45,75); zhixian.lineTo(45,95); zhixian.lineTo(25,95); zhixian.stroke(); zhixian.moveTo(55,75); zhixian.lineTo(55,95); zhixian.lineTo(75,95); zhixian.stroke(); zhixian.moveTo(25,105); zhixian.lineTo(45,105); zhixian.lineTo(45,125); zhixian.stroke(); zhixian.moveTo(55,125); zhixian.lineTo(55,105); zhixian.lineTo(75,105); zhixian.stroke(); //第五行，，文字那行那里我最后才寫，，因為如果我把文字，插入到中間的行數來寫，會發現下面的格子都不見了。 //建議創建文字的時候，先不急切的移動到自己想要的位置， //文字的真實點是在字體的左下面 {.漢}，你可以 hanzi.font = '25px sans-serif';//字體大小也會影響的哦。 hanzi.fillStyle = "red"; hanzi.translate(60,235);//其實這步是這重要的，定好中心點好，旋轉起來就剪刀了 hanzi.rotate( 270* Math.PI/180);//我這步最后操作，等你中心點定好，移動到你自己想要的位置，再調角度 hanzi.fillText('漢',0,0); hanzi.fillText('界',0,100); hanzi.rotate( 180* Math.PI/180); hanzi.fillText('楚',-25,-280); hanzi.fillText('河',-25,-180); hanzi.restore(); //如還是 不懂的話，，可以復制我的代碼，，自己改一下里面的數據，最好幾十幾十改，就會明白其中的道理。 </script> </body> </html>