2

円と三角形をレンダリングする 2 つの関数を定義しました。非常に率直なもの。

function circle(offset, size){
  var color = $("#color option:selected").val();
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  radius = size * 1;

  context.beginPath();
  context.arc(offset, 2, radius, 0, 2 * Math.PI, false);
  context.fillStyle = color;
  context.fill();
 }

 function triangle(offset, size){
  var color = $("#color option:selected").val();
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var width = size * 6;
  var height = size * 5;
  var padding = 0;

  // Draw a path
  context.beginPath();
  context.moveTo(offset + width/2, padding);
  context.lineTo(offset + width, height + padding);
  context.lineTo(offset, height + padding);
  context.closePath();

  // Fill the path
  context.fillStyle = color;
  context.fill();
}

私は自分のページにキャンバスを追加しました:

<canvas id="canvas"></canvas>

何らかの理由で、円と正方形が正しくレンダリングされていないことがわかります。添付のスクリーン ショットを参照してください。

ここに画像の説明を入力

ここに画像の説明を入力

4

1 に答える 1

6

<canvas>これは、 HTML属性ではなく、CSSの幅と高さを使用してCanvasの幅と高さを設定しているためです。

幅/高さは、canvasタグで定義する必要があります。<canvas width="500" height="500">

またはコードで：

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;

そしてCSSではありません。これを行った場合：

<canvas style="width: 500px; height: 500px;">

次に、500x500にスケーリング/ワープされた300x150のキャンバス（デフォルトサイズ）が作成されます。これは、ほぼ確実に取得できるものです。

（私は上記のフリーハンドを書いたのでタイプミスがあるかもしれませんが、あなたはその考えを理解します）

于 2012-04-10T20:29:47.887 に答える