07、canvas標籤之canvas變換
阿新 • • 發佈：2019-02-11
canvas變換
.translate(x,y)座標基準點偏移 : 從起始點為基準，移動到當前位置
.rotate(弧度):旋轉 弧度公式 ：角度*PI/180
.scale(wb,hb)縮放比例(縮放canvas繪製的圖片)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> #canvas{ background:#b086a3; } </style> </head> <body> <canvas id='canvas' width='500px' height='500px'>您的瀏覽器不支援，請更新瀏覽器!</canvas> <script> /* 設定繪圖樣式： fillStyle: 填充顏色 strokeStyle: 觸筆顏色 lineWidth: 觸筆寬度(線寬) 圖形邊界樣式： lineJoin : 邊界連線點樣式 miter(預設值),round(圓角),bevel(斜角) lineCap: 端點樣式 butt(預設值),round(圓角),square(高度多出線寬一半) canvas變換 translate(x,y) 座標基準點偏移 : 從起始點為基準，移動到當前位置 rotate(弧度): 旋轉 弧度公式 ：角度*PI/180 scale(wb,hb)縮放比例(縮放canvas繪製的圖片) */ var ocan = document.getElementById('canvas'); var oCanvas = ocan.getContext("2d");//那大canvas並2d渲染環境; oCanvas.fillStyle='#ff00ff';//設定填充顏色 oCanvas.strokeStyle='#336666';//設定觸筆方法的顏色 oCanvas.lineWidth=5;//設定觸筆寬度(線寬) /*繪製曲線*/ for(var i=0;i<12;i++){ oCanvas.save(); oCanvas.translate(250,250);//將座標基準點移動到畫布中心 oCanvas.rotate(30*i*Math.PI/180);//旋轉繪製的角度 oCanvas.moveTo(0,-160); oCanvas.lineTo(0,-190) oCanvas.stroke();//觸筆方法 //oCanvas.fill();//填充方法 oCanvas.restore(); } </script> </body> </html>