22

HTML5 キャンバスを使用して、緑の線の左側に赤い線を描画しようとしています。これが私のJavaScriptです：

var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;
var canvasContext = canvas.getContext('2d');
canvasContext.beginPath();

// Draw the red line.
canvasContext.strokeStyle = '#f00';
canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.stroke();

// Draw the green line.
canvasContext.moveTo(50, 0);
canvasContext.strokeStyle = '#0f0';
canvasContext.lineTo(50, 100);
canvasContext.stroke();

document.body.appendChild(canvas);​

ただし、Google Chrome では、薄緑色の線の左側に濃い緑色の線が表示されます。なんで？ストロークを 2 回呼び出しましたよね？では、なぜ最初の脳卒中が 2 番目の脳卒中に影響するのでしょうか?

これが私の言いたいことを示す JSFiddle です。

4

2 に答える 2

39

canvasContext.beginPath();2 番目の線を引き始めたときは、電話していません。

描画セクションをより独立させるために、空白を追加しました。

var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;

var canvasContext = canvas.getContext('2d');

// Draw the red line.
canvasContext.beginPath();
canvasContext.strokeStyle = '#f00';
canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.stroke();

// Draw the green line.
canvasContext.beginPath();
canvasContext.moveTo(50, 0);
canvasContext.strokeStyle = '#0f0';
canvasContext.lineTo(50, 100);
canvasContext.stroke();

document.body.appendChild(canvas);

デモ: http://jsfiddle.net/AhdJr/2/

于 2012-08-10T05:20:14.307 に答える
5

私が知る限り、webgl または opengl の作業は、状態を定義し、描画し、状態の描画を再度更新するなどの大きなステート マシンのようなものです ...

単純な 2D レンダリング用であっても、キャンバスが同じ原則に従っているかどうかはわかりません。

新しいパスを開始するだけで、なんとか機能しました。

var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;
var canvasContext = canvas.getContext('2d');
canvasContext.beginPath();

// Draw the red line.

canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.strokeStyle = '#FF0000';
canvasContext.stroke();

canvasContext.beginPath(); // begin new path
// Draw the green line.
canvasContext.moveTo(50, 0);
canvasContext.strokeStyle = '#00FF00';
canvasContext.lineTo(50, 100);
canvasContext.stroke();

document.body.appendChild(canvas);​

私は webgl の経験が限られているため、間違っている場合は修正してください。

于 2012-08-10T05:20:13.313 に答える