canvas雑記

7405 ワード
javascript
一.canvas概要
1.1何がcanvasですかCanvasは、HTMLコードの嵌合高さと幅属性によって定義された描画可能領域である.JavaScriptコードは、他の一般的な二次元APIと同様に、完全な図形描画関数のセットによって、グラフィックスを動的に生成する領域にアクセスすることができる.
二.canvas製図
2.1 canvasラベル
2.1.1 canvasラベル文法と属性
  • タグ名canvasは、閉じる必要があります.ただのhtmlタグです.
  • はwidthとheight属性を設定できますが、属性値単位はpxでなければなりません.そうでなければ無視します.
  • 注意:
  • CSSで幅と高さを制御しないでください.画像を引っ張り出します.
  • canvasラベルの幅の高い属性を再設定すると、キャンバスがすべての内容を消去します.
  • キャンバスに背景色を設定することができます.
    • 2.1.2ブラウザの互換性の問題
  • ie 9以上はcanvasをサポートします.他の現代ブラウザなどは全部
    • をサポートします.
  • モバイル端末の互換性がいいです.基本的に全部
    • が使えます.
  • dの支持のはすべてとても良くて、3 d(webgl)ie 11はやっと支持して、その他はすべて
    • を支持します.
  • ブラウザが互換性がない場合は、ヒントを与えたほうがいいです.
      ：

           ，        canvas。
    2.2描画コンテキストcontext
  • キャンバスは固定サイズのキャンバスを作成して、一つ以上の描画コンテキスト(絵筆)を公開して、レンダリングコンテキストを使って、展示する内容を描画して処理します.
  • Canvas自身は何も描画できません.キャンバスの絵はJavaScriptを使って操作します.
  • ContectオブジェクトはJavaScript操作Canvasのインターフェースです.
    • let canvas = document.getElementById('canvasDemo'); //    （canvsa  ）
let ctx = canvas.getContext('2d');
    2.3パスの描画
    2.3.1 canvas座標系
    canvasの座標体系では、左上角を原点とし、右方向をx軸正方向とし、下方向をy軸正方向とする.
    2.3.2始点を描く
    *   ：ctx.moveTo(x, y);
*   ：            。            
*   ：x,y       canvas            。
*   ：**            。**
    2.3.3直線を描く
    *   ：ctx.lineTo(x2, y2);
*   ： x2,y2                    。
*   ：x2,y2      。
    2.3.4パスの開始とクローズ
    *     ：ctx.beginPath();
*     ：ctx.closePath();
*   ：                ，                      。                       。
* beginPath:                    ，
        ，          ,                      。
    2.3.5エッジを描く
    *   ：ctx.stroke();
*   ：       。      ，       ，         stroke
  • canvasの基本的な手順のまとめ:
  • 第一歩:コンテキストを得る=>canvasElem.get Conttext('2 d')
  • 第二ステップ:スタート経路計画=>ctx.begingPath()
  • 第3ステップ:移動開始点=>ctx.moveTo(x,y)
  • 第4ステップ:描画ライン=>ctx.line To(x,y)
  • 第5ステップ:クローズパス=>ctx.closePath()
  • 第六ステップ:描画描画描画エッジ=>ctx.strook()
    • html部分:
               ，        canvas。
    javascript部分:
    //===============    api====================
//    
let canvas = document.querySelector('#canvasDemo');
let ctx = canvas.getContext('2d'); //     
canvas.width = 900; //         
canvas.height = 600; //         
canvas.style.border = '1px solid #000';
//     
ctx.beginPath(); //    
ctx.moveTo(100, 100); //   ，   
ctx.lineTo(300, 100); //   
ctx.lineTo(300, 300); //    
ctx.closePath(); //    
ctx.stroke(); //
    2.3.7充填(fill)
    *   ：ctx.fill();
*   ：  ，                 。    。
*  ：     ctx.fillStyle="red";//   8    #FF0000
 ctx.fill();
    2.3.4快速作成(rect)、クリッピング(stoceRect)、充填(fillRect)、クリア(fillRect)の矩形
    *     ：ctx.rect(x, y, width, height);
*   ：x, y        ， width height      
* rect            ，        。
*     ： ctx.strokeRect(x, y, width, height);
 -          ，               stroke  
*   ：ctx.fillRect(x, y, width, height);
 -          ，         。         fill  。
*     ：ctx.clearRect(x, y, width, hegiht);
*   ：             ，      。
    2.4円を描く(arc())
      ：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
  ： - x,y：    。 - r：    。 - sAngle:       。          0  ，         。 - eAngel:     ，     。 counterclockwise：      。true     ，false：    -           ： rad = deg*Math.PI/180;
    2.5描画テキスト
    * ctx.fillText()            “    ”  
* ctx.strokeText()            （   ）
* ctx.measureText()                
//     
ctx.font = "18px bold   ";
//     
ctx.fillStyle = "#f00";
//         
ctx.textAlign = "center";
//         
ctx.textBaseline = "middle";
//     （  ：    ，x  ，y  ）
ctx.fillText("     ", 100, 100);
    2.6画像変換
    2.6.1スケーリング
    scale()         ，     
  ：ctx.scale(scalewidth,scaleheight)
scalewidth :           (1=100%, 0.5=50%, 2=200%,     )
scaleheight :           (1=100%, 0.5=50%, 2=200%, etc.) +  ：        ，   ，              ，            。
    2.6.2変位キャンバス
    ctx.translate(x,y)            (0,0)   
    ：
x：        （x）   
y：        （y）   
     ，        0,0          x,y    ，            。
    2.6.3回転
  • context.rotate(angle);方法で、現在の描画
    • を回転させる.
  • 注意パラメータは、ラジアン(PI)
    • である.
  • 角度をラジアンに変換するには、degrees*Math.PI/180式を使って計算してください.
    • 2.6.4描画環境の保存と歓迎
  • ctx.save()現在の環境を保存した状態
  • は、現在の描画環境をキャッシュに保存することができる.
  • ctx.restore()は、以前に保存された経路状態と属性
    • を返す.
    3.canvasフレーム
    3.1フレーム紹介
    canvasのフレームが多いです.そして、ポイントが違っています.
    例えばThree.jsは有名な3 Dフレームで、d 3.jsはデータ展示に偏ります.
    フレーム名
    領域
    移動端
    文書
    github
    その他
    ThreeJS
    3 D
    サポート
    完全である
    https://github.com/mrdoob/three.js
    強力なグラフィックエンジン
    playCanvas
    3 D
    サポート
    はい、中国語があります
    ゲームエンジンは、視覚化された編集ツール「playCanvas Editor」を提供します.
    Egret
    2 D+3 D
    サポート
    はい、中国語があります
    https://github.com/egret-labs/egret-core
    国産、マルチエンドゲームエンジン
    Pixi
    2 D
    サポート
    完全である
    https://github.com/pixijs/pixi-particles
    WebGLエンジン
    Fabric.js
    2 D
    を選択します.
    完全である
    https://github.com/fabricjs/fabric.js
    KONVA
    2 D
    完全である
    https://github.com/konvajs/konva
    専用のvueとreactバージョンがあります.
    spritejs
    2 D
    はい、中国語があります
    https://github.com/spritejs/spritejs
    プラットフォームにまたがる高性能グラフィックスシステムは、web、node、デスクトップアプリケーション、および小プログラムのグラフィックス描画をサポートし、様々なアニメーション効果を実現することができます.vueバージョンがあります
    ​
    3.2 spritejs学習
    3.2.1特性
  • は、DOMオブジェクトを操作するようにカンバス上のグラフィック要素
    • を操作する.
  • WebGL 2レンダリング
  • マルチレイヤー処理パターン、テキスト、画像レンダリング
  • DOMイベント代理、カスタムイベント配布~~
  • ES 6+構文とオブジェクト指向プログラミング
    • を使用する.
  • OffscreenCanvasとWeb Worker マルチスレッドレンダリング
  • 構造化対象ツリーは、d 3エンジンに友好的で、シームレスに
    • を使用することができます.
  • 職務に応じて誇張する
  • Vue
    • 3.2.2アーキテクチャ
    SpriteJS Nextはいくつかの種類の基礎精霊要素を提供し、DOM元素を操作するようにレイヤー上でそれらを操作することができます.
    微信小プログラムはオーディオを再生します.ios静音状態では音がなく、オーディオ再生は複数の問題を作成します.