html5之canvas

蘇丹發(fā)布于2019-08-26 13:43 / 1056人閱讀

摘要：是新加的標簽，主要有和，的應用是動畫和圖像，的應用是游戲渲染。

HTML5 Canvas

canvas是html5新加的標簽，主要有2D和3D，2D的應用是動畫和圖像，3D的應用是游戲渲染。

1. 2D基礎 1.1繪制線




    
    
    
    canvas

1.3 繪制矩形




    
    
    
    canvas

1.4 繪制圓




    
    
    
    canvas

1.5 繪制文字




    
    
    
    canvas

1.6 表格練習




    
    Canvas繪制表格

2. canvas動畫 2.1動畫原理

//requestAnimationFrame會根據刷新頻率自動調用callback
(function drawFrame(){
   window.requestAnimationFrame(drawFrame, canvas);
}());

2.2進度條練習




    
    canvas動畫

2.3彈動小球練習




    
    ball animate

3.canvas圖像 3.1基礎api




    
    ball animate

3.2canvas放大鏡效果練習

3.3canvas縮放效果練習

3.4canvas水印效果練習

3.4canvas濾鏡效果練習




    
    



    
        

        
    
    

    
        Grey Effect
        Black and White Effect
        Reverse Effect
        Blur Effect
        Mosaic Effect

在使用上面的代碼的時候會有跨域問題，解決方法如下：
npm install http-server -g
http-server -p 8081

canvas應用的場景有很多，寫這篇文章參考了很多別人的總結，鏈接放在下面大家去看看：

炫麗的倒計時效果Canvas繪圖與動畫基礎：https://www.imooc.com/learn/133
Canvas繪圖詳解：https://www.imooc.com/learn/185
Canvas玩轉圖像處理：https://www.imooc.com/learn/476

GPU云服務器云服務器 HTML5 Canvas html5的canvas html5Canvas html5新特性之webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109382.html

html5之canvas

摘要：是出現的新標簽，主要用來畫圖，看見網上能用來實現各種圖形，所以感覺很好玩，就學習了一下。 canvas是html5出現的新標簽，主要用來畫圖，看見網上能用來實現各種圖形，所以感覺很好玩，就學習了一下。canvas繪制圖形有兩種方法： context.fill() //填充 context.stroke() //繪制邊框在繪制圖形...

ygyooo 2019-08-29 10:56 評論0 收藏0
html5之canvas

摘要：是出現的新標簽，主要用來畫圖，看見網上能用來實現各種圖形，所以感覺很好玩，就學習了一下。 canvas是html5出現的新標簽，主要用來畫圖，看見網上能用來實現各種圖形，所以感覺很好玩，就學習了一下。canvas繪制圖形有兩種方法： context.fill() //填充 context.stroke() //繪制邊框在繪制圖形...

TalkingData 2019-08-19 18:42 評論0 收藏0