Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

HTML5キャンバスをマウスカーソルにズーム

キャンバスは常に現在の原点から拡大縮小されます。デフォルトの原点は[0,0]です。別のポイントからスケーリングする場合は、最初にctx.translate（desiredX、desiredY）;を実行できます。これにより、キャンバスの原点が[desiredX、desiredY]にリセットされます。

translate（）メソッドは、キャンバス上の（0,0）位置を再マップします。 scale（）メソッドは、現在の図面を拡大または縮小します。オフセットでキャンバスコンテキストをtranslate（）する場合は、最初にスケール（）してズームインまたはズームアウトしてから、マウスオフセットの反対側でtranslate（）に戻す必要があります。

これらの手順は、次の例に示されています

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

  1. HTML5キャンバス変換

    HTML5キャンバスは、変換行列を直接変更できるメソッドを提供します。変換行列は、最初はID変換である必要があります。その後、変換方法を使用して調整できます。 例 キャンバス変換の例を見てみましょう： <!DOCTYPE HTML> <html>    <head>       <script>          function drawShape(){             //

  2. HTML5でキャンバスを中央に配置する方法は？

    HTML 5でキャンバスを中央に配置するには、divタグにcanvasタグを含めます。次に、divタグを中央揃えにします。そうすることで、キャンバスも中央揃えになります。 例 <!DOCTYPE html>. <html>    <body>       <div style = "text-align:center;">          <canvas style = "background-color:GR