canvas入門で気づかなかった知識

6407 ワード
canvas javascript

前言


本文は7月末に書いて、入って残業しないで整理して、いくつかのとても基礎的な知識、canvasが入門したばかりの人にとって、読む価値があります.

虹のような勢いで始まる


いろいろな文章を読むより、数学の論理が好きです.いろいろな日進月歩の枠組みを学ぶよりも、基礎がしっかりしていることが人に与える地道さが好きです.ページをパッチワークしてジャンプするよりも、アニメーションが好きで、グラフィックがページの中で直感的に表現されています.あなたは私と同じように、H 5に対する好奇心に向かって、図形に対する爱に向かって、canvasを学んで、熟练していないで、ただ简単にドアに入って、もしかするとあなたは入门の敷居の上でつまずいて転んで、学友は泣かないで、立ち上がって引き続き私は私の入門の2日間の蓄積を書いて、いくつかの敷居、数百回つまずいて、いくつかもあなたに似合うはずです.以下のctxはcanvasが作成した2 dグラフィックスインスタンスを指し、コード:
var canvas = document.querySelector('#test');  //test Html   canvas   ID,   600，  400；
var ctx = canvas.getContext('2d');

大事なことを言う


2 dコンテキスト(キャンバス)座標は、要素の左上隅で開始され、その頂点は座標の原点であり、x軸はスクリーンの右側を指し、Y軸はスクリーンの下を指します.したがって、x値が大きいほど右側になり、Y値が大きいほど下側になります.これは私たちの伝統的な座標軸とは大きく違います.次の図は、見えるかもしれません.Y軸が逆方向になっているのは分かりやすいかもしれませんが、時計回りの正0度が座標軸の位置にあるのは、arcを使って、この常識を熟知することが大切です.

4つの基本的な方法


線:strokeとstrokeStyle

 ctx.strokeStyle = 'red';
 ctx.arc(200,200,50,0,PI*2,false);
 ctx.stroke();

lineTo、moveTo方法、とても基礎的で、ここで特にarc(x,y,r,startAngle,endAngle,direction)が円を描く方法を言って、この方法は6つのパラメータを受け入れて、前の5つは必要で、それぞれ円心位置(x座標、y座標)、それから円の半径rで、それから開始位置角と終了位置角で、この2つはとても重要で、前の図と結びつけてもっと理解して、私達は知ることができて、上のコードで描かれた最初の点は(0,50)、終了位置も(0,50)です.後のdirectionはオプションのパラメータで、デフォルトはfalseで、時計回りに描画することを示し、trueの場合、反時計回りに描画します.詳細:
  • 紅宝書では、経路を描くにはbeginPath()の方法で始まるべきだと言われていますが、これは必要ありません.strokeという方法でこの経路の描画を終わらせるだけですが、プラスしても悪くないので、追加しましょう.
  • はlineTo(0,50)メソッドを1回だけ呼び出すので、直線が見えません.(0,0)はデフォルトの起点ではありません.moveTo()メソッドで起点を設定しない限り、この簡単な道理は2点で直線を確定します.
  • closePath()はbeginPathと対照的に使用される方法ではありません.図に示すように、閉じたパスを描画する役割を果たします.lineToメソッドは2回しか呼び出されていませんが、最後に3つの線を除いて、最後にこの線がclosePathによって作用していることがわかります.ただし、closePathはstrokeが使用される前に呼び出す必要があることに注意してください.

    • 充填:fillStyleとfill

    ctx.fillStyle = 'red'
ctx.arc(200,200,50,0,PI/3,false);
ctx.fill();

    線に対応するのは充填ですが、この方法はとても凝っていません.通常、閉鎖区間だけが充填する資格がありますが、fillという方法は必要ありません.あなたの経路が直線でなければ、それは充填されます.つまり、同じ直線上の3点ではありません.1つの面を確定することができます.この方法は本当にすごいです.私は服従しなければなりません.

    描画テキスト:stokeTextとfillText


    以上の2つの方法で1つの字を書くことができますが、推奨される使い方はfillTextです.それは実心字を書いているので、stokeTextは線の中空字を書いているので、ほとんどの芸術字はこのような書き方を採用しています.もちろん、あなたが望むなら両方を組み合わせて使ってもいいです.
    ctx.fillStyle = 'red'
ctx.font= 'bold 12px Arial';
ctx.fillText('Test',300,200);

ctx.strokeStyle = 'red'
ctx.font= 'bold 12px Arial';
ctx.strokeText('Test',400,200);

    画像の描画:drawImage


    多くの入門者が、この場所が見えないと信じています.canvasは画像を描くのではないでしょうか.ああ、正確ではありません.canvasは図形を描くのです.具体的にはdrawImageで、キャンバスに画像を描くだけでなく、canvasの図形を描くこともできます.これは星空、雨滴などの事件列で最も応用され、canvasのスクリーン離れ最適化で最も多く使われています.次の例を見てください.var cache = document.createElement('canvas');cache.width = 50;cache.height = 50;var cacheCtx = cache.getContext('2d');//これはdomノードに追加されていないため、仮想キャンバスです.
    cacheCtx.beginPath();
cacheCtx.strokeStyle = 'red';
cacheCtx.moveTo(5,5);
cacheCtx.lineTo(20,40);
cacheCtx.lineTo(40,20);
cacheCtx.closePath();
cacheCtx.stroke();

ctx.drawImage(cache,50,50);
ctx.drawImage(cache,50,100);
ctx.drawImage(cache,100,50);
ctx.drawImage(cache,100,100);

    上記の例では、drawImageのオフスクリーン最適化への応用を見ることができます.なぜこのようにできるのか、上のようにキャンバスに4つの同じ三角形を描きます.これはブラウザの表現ではカートンが見えません.もしスクリーンに千個や万個のこのような図形を描き、フレームごとに規則的に彼らの位置を変換しなければならないなら、ブラウザのカートンを明らかに感じることができます.domの要素を操作しているからです.ブラウザを再描画し続け、Webページをレンダリングします.しかし、フレームごとに次のステータスをペイントする前に、jsで仮想canvasで次のフレームの背景ステータスを先にペイントし、drawImageという方法でブラウザのキャンバスステータスを更新すると、ページは常にレンダリングされるのではなく、フレームで1回だけレンダリングされ、スクリーンから最適化されるため、drawImageで最も多くのシーンが使用されます.
    以上の知識を終えて、入門知識を復習しても、なぜfillRectとstrokeRectを言わなかったのかというと、strokeとfillが矩形を描く文法糖を提供しているのです.

    奇妙な変化


    あなたは私と同じように、自分の座標系が左上隅から始まることに慣れていないかもしれません.私たちは座標の原点が左下隅か真ん中にあることに慣れています.

    座標原点変換translateメソッド


    原点をキャンバスの中心に変換する:ctx.translate(WIDTH/2、HEIGHT/2)、WIDTHとHEIGHTはそれぞれキャンバスの幅と高さを指し、座標変換をより明確に表現するために、私は同じ領域で、2つの大きさの似たキャンバスを描いて、それから1つのブロックに原始座標系を使用させて、1つのブロックはtranslate変換後の、具体的にコードを見て、結果図を見ます;
    
    
    

    

var ctx = document.querySelector('#test').getContext('2d');
var crx = document.querySelector('#testa').getContext('2d');

ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.arc(0,0,5,0,PI*2,false);
ctx.moveTo(0,0);
ctx.lineTo(0,150);
ctx.moveTo(0,0);
ctx.lineTo(150,0);
ctx.stroke();

crx.beginPath();
crx.translate(300,200);
crx.arc(0,0,5,0,PI*2,false);
crx.strokeStyle = 'red';
crx.moveTo(0,0);
crx.lineTo(0,150);
crx.moveTo(0,0);
crx.lineTo(150,0);
crx.stroke();

    座標系回転変換rotateメソッド


    canvasに触れて久しいかもしれませんが、rotateの方法はずっと使う機会がありません.赤い宝の本に時計の時計の針を描いているのを覚えています.分針の時、rotateの使い方に言及しましたが、よく知っていれば、使い方は奇妙です.APIはrotate(angle)と明確に言い、原点画像の周りにangle弧度を回転させることを指す.だから、2時を覚えておく必要があります.第一に、画像は原点を中心に回転します.第二に、画像の回転というより、座標系全体が回転しています.例を見ると、やはり上と同じように、比較してこそ説得力があります.
    ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.translate(300,200);
ctx.arc(0,0,5,0,PI*2,false);
ctx.moveTo(0,0);
ctx.lineTo(0,150);
ctx.moveTo(0,0);
ctx.lineTo(150,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(0,-150);
ctx.stroke();

crx.beginPath();
crx.strokeStyle = 'red';
crx.translate(300,200);
crx.rotate(PI/3); //  60*
crx.arc(0,0,5,0,PI*2,false);
crx.moveTo(0,0);
crx.lineTo(0,150);
crx.moveTo(0,0);
crx.lineTo(150,0);
crx.stroke();
crx.moveTo(0,0);
crx.lineTo(0,-150);
crx.stroke();

    前の図に比べて、私は2つのキャンバスの中心をキャンバスの中心に変換しました.対比として、赤いブラシの回転変換を行い、それぞれ正x、正y軸を描いた後、stoke法が1段の描画を終了した後、負のy軸を描きました.前の描画経路のrotateは依然として機能しているので、rotateはキャンバス座標系を変換し、狭義の描画画像ではなく、この違いはとても重要です.前のコードでsin,cos計算を使わずに正のポリゴンを描くことができます.ここでは6辺形を例に挙げます.
    ctx.beginPath();
ctx.translate(300,200);
ctx.strokeStyle = 'red';
var a=0;
for(var i=1;i<7;i++){
    ctx.lineTo(0,150);
    ctx.rotate(PI/3);
    a =a + PI/3 ;
}
ctx.closePath();
ctx.stroke();
ctx.lineTo(0,0);
ctx.stroke();

    重要ではありませんが、問題の多いAPIです。


    普通のグラフィックを描くには、上のAPIでも十分かもしれませんが、グラフィックにハイライトを付けるには、もっと理解する必要があるかもしれません.個人的には、シャドウの描画(shadow)とグラデーションの追加(createLinearGradient)が非常に役に立つと思います.canvasで星の背景を作ったり、飛んだりする流星の周りの閃光は、shadowで作られた特効です.消えた流星は、頭が明るく、尾が暗い効果はグラデーションで作られており、以降のシリーズでは、実例を結びつけて多く話されています.
    GoogleChartで世界地図を色分け表示してみた
    Spring security開発プリファレンス