jCanvas コードを、window.resize で起動する render メソッドにまとめました。
<script type="text/javascript">
var middleX;
var middleY;
var canvas;
var ctx;
var isLoaded = false;
$(document).ready
(
function ()
{
init();
isLoaded = true;
render();
$("canvas").fadeIn(2000);
}
);
function scaleToWindowDimensions()
{
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
middleX = $canvas.width() / 2;
middleY = $canvas.height() / 2;
}
function init()
{
$canvas = $('canvas');
ctx = document.getElementById("canvas").getContext("2d");
scaleToWindowDimensions();
}
$(window).resize
(
function ()
{
scaleToWindowDimensions();
render();
}
);
function render()
{
if (!isLoaded)
{
return;
}
$canvas.clearCanvas();
// ctx.clearRect(0, 0, $canvas.width(), $canvas.height());
$canvas.addLayer({
method: 'drawArc',
strokeStyle: "#000",
strokeWidth: 1,
fillStyle: '#c33',
x: middleX,
y: middleY,
closed: true,
radius: 50,
// Event bindings
mousedown: function (target)
{
alert('You pushed RED!');
},
mouseup: function (target)
{
target.fillStyle = '#c33';
},
mouseover: function (target)
{
target.fillStyle = "#888";
},
mouseout: function (target)
{
target.fillStyle = "#c33";
}
});
$canvas.addLayer({
method: "drawText",
strokeStyle: "#000",
fromCenter: true,
strokeWidth: 1,
fillStyle: "#333",
fontSize: "18pt",
fontFamily: "Verdana",
x: middleX,
y: middleY,
text: "Man",
data: { "id": 1, "word": "Man" },
mousedown: function (target)
{
alert($(this).id);
}
});
$canvas.addLayer({
method: 'drawArc',
strokeStyle: "#000",
strokeWidth: 1,
fillStyle: '#d88',
x: 500,
y: 100,
closed: true,
radius: 40,
// Event bindings
mousedown: function (target)
{
alert('You pushed RED!');
target.fillStyle = '#333';
},
mouseup: function (target)
{
target.fillStyle = '#d88';
},
mouseover: function (target)
{
target.fillStyle = "#888";
},
mouseout: function (target)
{
target.fillStyle = "#d88";
}
});
$canvas.addLayer({
method: "drawText",
strokeStyle: "#000",
fromCenter: true,
strokeWidth: 1,
fillStyle: "#333",
fontSize: "16pt",
fontFamily: "Verdana",
x: 500,
y: 100,
text: "Men",
data: { "id": 2, "word": "Men" },
mousedown: function (target)
{
alert($(this).id);
}
});
$canvas.addLayer({
method: 'drawLine',
strokeStyle: "#222",
strokeWidth: 1,
x1: middleX,
y1: middleY,
x2: 500,
y2: 100,
radius: 40,
});
$canvas.drawLayers();
}
</script>
これにより、次の画像が描画されます。
目的は、キャンバス全体をクリアするために render が呼び出されたときの最初のステップです。
$canvas.clearCanvas();
// ctx.clearRect(0, 0, $canvas.width(), $canvas.height());
これらは、キャンバスをクリアするための 2 つの別々の試みであり、どちらも機能しません。キャンバスをクリアしないと、結果は次のようになります。
これは直接描画するのではなく、レイヤーに関係しているという一般的な考えがありますが、キャンバスがクリアされない理由に困惑しています...
ティア。