我已经将我的 jCanvas 代码组织成一个在 window.resize 上触发的渲染方法:
<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());
这是清除画布的两次单独尝试,但都不起作用。在没有清除画布的情况下,结果是这样的:
我有一个普遍的想法,这与图层有关,而不是直接绘制,但我很困惑为什么画布没有被清除......
TIA。