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

HTML5とキャンバスまたはSVGを使用してグリッドを描画する方法は？

以下の例では、最初にグリッドの幅と高さを定義しました。次に、キャンバスのサイズを定義し、グリッドをキャンバスに描画します。

//we are setting the grid width and height
var grid_w = 200;
var grid_h = 200;

//we are setting padding around grid
var gridp = 15;

//we are defining size of canvas by defining its width and height
var canvas_w = grid_w + (gridp*2) + 1;
var canvas_h = grid_h + (gridp*2) + 1;
var canvas = $('<canvas/>').attr({width: canvas_w, height: canvas_h}).appendTo('body');
var ctx = canvas.get(0).getContext("2d");
これが私たちの方法です-

function drawBoard(){
   for (var a = 0; a <= grid_w; a += 50) {
      ctx.moveTo(0.5 + a + gridp, gridp);
      ctx.lineTo(0.5 + a+ gridp, grid_h + gridp);
   }

  1. キャンバスHTML5を使用して星を描く方法は？

    HTMLキャンバスへの描画は、JavaScriptを使用して行います。キャンバスに描画する前に、HTML DOMメソッドgetElementById（）およびgetContext（）を使用します。 HTMLで星を描くには、canvas要素を使用します。 キャンバスでは、lineTo（）メソッドを使用して星を描画します。 lineTo（）メソッドには、描画に役立つように線を配置するxおよびyパラメータ値が含まれています。 HTMLドキュメントにキャンバスを描画するには： 例 次のコードを実行して、HTML5キャンバスを使用して星を描くことができます <!DOCTYPE HTML&

  2. HTML5でSVGを使用して図形を描く方法は？

    SVGはScalableVectorGraphicsの略で、XMLで2Dグラフィックスとグラフィカルアプリケーションを記述するための言語であり、XMLはSVGビューアによってレンダリングされます。ほとんどのWebブラウザーは、PNG、GIF、およびJPGを表示できるのと同じようにSVGを表示できます。 HTML5のSVGを使用して、円、長方形、線などの図形を簡単に描画できます。 SVGを使用して長方形を描く例を見てみましょう。 例 次のコードを実行して、HTML5で長方形を描画してみてください。 要素が使用されます <!DOCTYPE html> <html>