SQLに保存された情報を取得し、それらをHTML5キャンバスにグラフィカルに（色分けして）プロットするHTML5キャンバスグラフを開発しました。キャンバスを使用すると、タイムラインをスクロールして、発生したさまざまなイベントを表示できます（1990年から2013年の間に言う）。
IEは魅力のように機能します。
Chromeには、コンテキストフォントが濁っている/出血効果があるという問題があります-私はモノスペース11pxを使用していましたが、後でそれをverdanaに変更しましたが、それでもchromeで少し濁っています。Firefoxにはこの問題はありません。
Firefoxには問題があり、キャンバス上の情報を取得してプロットしますが、キャンバスをクリックしてタイムライン上の現在の位置の過去または未来をスクロールすると、キャンバス全体が消えます。Chromeにはこの問題はありません。
私はこの質問について私の問題を説明しようとしました。さらに明確にする必要がある場合は、質問してください。
サンプルコードは次のとおりです。-
（リンクをクリックしてIE、FireFox、Chromeで開くと、問題がより明確になることを願っています。）
// defining the canvas element
var can = document.getElementById("myCanvas"),
ctx = can.getContext("2d"),
dragging = false,
translated = 0,
lastX = 0,
grid = (function (dX, dY) {
var can = document.createElement("canvas"),
ctx = can.getContext('2d');
can.width = dX;
can.height = dY;
// fill canvas color
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, dX, dY);
// x axis
ctx.strokeStyle = 'orange';
ctx.moveTo(.5, 0.5);
ctx.lineTo(dX + .5, 0.5);
ctx.stroke();
// y axis
ctx.moveTo(.5, .5);
ctx.lineTo(.5, dY + .5);
ctx.stroke();
return ctx.createPattern(can, 'repeat');
})(72, 50);
ctx.save();
/*ctx.scale(1, -1);
ctx.translate(0, -900);*/
// when mouse is clicked on canvas
can.onmousedown = function (e) {
var evt = e || event;
dragging = true;
lastX = evt.offsetX;
}
// when mouse is clicked again and the canvas is deselected
window.onmouseup = function () {
dragging = false;
}
window.onmousemove = function (e) {
var evt = e || event;
if (dragging) {
var delta = evt.offsetX - lastX;
translated += delta;
//console.log(translated);
ctx.restore();
ctx.clearRect(0, 0, 930, 900);
ctx.save();
ctx.translate(translated, 0);
lastX = evt.offsetX;
timeline();
}
}
// Function that draws the timeline on the xy grid along with data points.
function timeline() {
// fill canvas color
ctx.fillStyle = "black";
ctx.fillRect(-translated, 0, 930, 900);
ctx.fillStyle = grid;
ctx.fillRect(-translated, -250, 930, 900);
// y-co-ordinate texts - Home, Office, Emergency, etc...
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Home", -translated, 510);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Office", -translated, 460);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Emergency", -translated, 410);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Foster Home", -translated, 360);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("SNF", -translated, 310);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("LTC", -translated, 260);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Drug/Rehab", -translated, 210);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Hospital", -translated, 160);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Hospice", -translated, 110);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("ANP Exams", -translated, 540);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Life Event", -translated, 560);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Care Plan", -translated, 610);
このコードから少し変更しましたが、クリックアンドスクロールの基本的な考え方は同じです。ありがとう。