canvas的畫布變化

1 縮放

ctx.scale(scalewidth,scaleheight);

注意:1 縮放的是整個畫布,縮放后,繼續(xù)繪制的圖像會被方法或縮小。

2 當前圖像的原點,寬高都被縮放了。

2 位移

ctx.stranslate(x,y);
x:添加到水平坐標上的值;   y:添加到垂直坐標上的值

注意:1 發(fā)生位移后,相當于把畫布的0,0坐標更換到新的x,y的位置,所有繪制的新元素都被影響。

2 位移畫布一般配合縮放和旋轉(zhuǎn)等。

3 旋轉(zhuǎn)

ctx.rotate(angle);

注意:參數(shù)angle是弧度

4 繪制環(huán)境保存和還原

ctx.save(): 保存當前環(huán)境的狀態(tài)
//一般寫在原狀態(tài)前面,用來保存初始狀態(tài)

ctx.restore():返回之前保存過的路徑狀態(tài)和屬性。
//獲取最近緩存的ctx

一般配合位移畫布使用。

5 設(shè)置繪制環(huán)境的透明度

ctx.globalAlpha = number;
//number:透明質(zhì)。介于0.0~1.0之間。

設(shè)置透明度是全局的透明度的樣式。

6 畫布限定區(qū)域繪制

ctx.clip();
//從原始畫布中剪切任意形狀和尺寸;

一旦剪切了某個區(qū)域,則所有之后的繪圖都被限制在被剪切的區(qū)域內(nèi)(不能訪問畫布上的其他區(qū)域)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標簽 ②:HTML5 ...
    GreenHand1閱讀 4,880評論 2 32
  • 一、簡介 HTML5 中的定義:“它是依賴分辨率的位圖畫布,你可以在 canvas 上面繪制任何圖形,甚至加載照片...
    destiny0904閱讀 10,832評論 1 4
  • 本文首發(fā)于我的個人博客:http://cherryblog.site/github項目地址:https://git...
    sunshine小小倩閱讀 2,117評論 1 8
  • 一、canvas簡介 1.1 什么是canvas?(了解) 是HTML5提供的一種新標簽 Canvas是一個矩形區(qū)...
    Looog閱讀 4,038評論 3 40
  • 當我們看到父母,身邊的好友吵架或是鬧矛盾的時候,總是免不了替他們難過著急,想去勸勸、調(diào)解調(diào)解,讓他們有話好...
    心葉Yogi閱讀 635評論 0 1

友情鏈接更多精彩內(nèi)容