首頁 > web前端 > html教學 > canvas繪製旋轉圖形

canvas繪製旋轉圖形

高洛峰
發布: 2016-11-16 11:38:43
原創
1308 人瀏覽過

將繪製到canvas上的要素旋轉:

1、繪製時,透過操作畫布的座標軸狀態:平移畫布原點,旋轉座標軸等,達到旋轉圖形的目的

2、操作操作DOM元素,直接旋轉canvas畫布

操作畫布的座標軸狀態:

var rect = {w:200,h:50,x:100,y:100};
 
    function rotateCanvas(){
        var angle = document.getElementById('angle').value;
        ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
        ctx.translate(rect.x+rect.w/2,rect.y+rect.h/2);   //坐标原点平移至该图形的中心点
        ctx.rotate(angle*Math.PI/180);                    //旋转坐标轴
        //ctx.scale(0.5,0.5);
        ctx.translate(-(rect.x+rect.w/2),-(rect.y+rect.h/2)); //坐标原点平移至初始位置
        //ctx.scale(1,1);
        ctx.fillRect(rect.x,rect.y,rect.w,rect.h); 
    }
登入後複製

canvas繪製旋轉圖形

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板