翻轉、移動、平移、放大、縮小
XML/HTML Code復制內容到剪貼板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- var context = canvas.getContext('2d');
- // 放大與縮小
- context.beginPath();
- context.strokeStyle = "#000000";
- context.strokeRect(10,10,150,100);
- // 放大3倍
- context.scale(3,3);
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(10,10,150,100)
- // 縮小
- context.scale(0.5,0.5);
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(10,10,150,100)
- // 翻轉
- var img = new Image();
- img.src = 'images/1.jpg';
- img.onload = function(){
- context.drawImage(img, 10,10);
- context.scale(1, -1);
- context.drawImage(img, 0, -500);
- }
- // 平移
- context.beginPath();
- context.strokeStyle = '#000000';
- context.strokeRect(10,101,150,100);
- // x移動 50 y 移動100
- context.translate(50,100);
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(10,10,150,100);
- // 旋轉
- context.beginPath();
- context.strokeStyle = '#000000';
- context.strokeRect(200,50,100,50);
- // 默認旋轉是根據0,0中心，使用translate可以按照自己的設置的中心旋轉
- context.translate(250,75);
- context.rotate(45 * Math.PI /180);
- context.translate(-250, -75);
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(200,50,100,50);
- // transform 矩陣
- context.beginPath();
- context.strokeStyle = '#000000';
- context.strokeRect(10,10,150,100);
- context.transform(3,0,0,3,0,0);
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(10,10,150,100);
- }
漸變、圖像組合效果、顏色翻轉
XML/HTML Code復制內容到剪貼板
學習交流
- 綠毒越獄軟件 完美越獄4.21教程12-21
- htcg15怎么刷機？htcg15刷機教程12-21
- HTC hd7刷安卓2.2全教程12-21
- mpkg軟件下載和卸載的方法12-21
- 網站后臺系統設置的網站地址格式寫法07-09
- 防止重復提交js按鈕變灰07-09
- 不同時間顯示不同的廣告代碼07-09
- iframe框架調用高度自適應方法07-09
- 備份數據庫出現問題的解決方法07-09
熱門圖片
猜你喜歡的新聞
