我用图像绘制 Canvas ，我希望当浏览器调整大小时，该图像可以响应浏览器。这是我的代码
function draw_canvas() {
var img = new Image();
var canvas = $('canvas')[0];
img.crossOrigin = 'anonymous';
img.onload = function(){
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0, $('#canvas_panel').width(), $('#canvas_panel').height());
};
img.src = 'http://dicprj.moe/media/mathimages/en/arithmetic_kinder_counting_money_01_10.png';
}
$(document).ready(function() {
draw_canvas();
});
$(window).resize(function() {
$('#canvas_panel > canvas').each(function(i,v) {
if($(this).height() != $('#canvas_panel').height() ||
$(this).width() != $('#canvas_panel').width())
{
$(this).attr({
'height' : $('#canvas_panel').height() + 'px',
'width' : $('#canvas_panel').width() + 'px'
});
}
});
});<html>
<head>
<meta charset="utf-8">
<title>DRAWING</title>
<meta charset="utf-8">
</head>
<body>
<div id="canvas_panel" style="height: 500px; widht: 800px" >
<canvas></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>- 问题:当浏览器调整大小时我看不到 Canvas ， Canvas 改变了 px 但它是空的。你能帮帮我吗？
- 我正在尝试使用代码:
if($(this).height() != $('#canvas_panel').height() || $(this).width() != $('#canvas_panel').width()) {
$(this).attr({
'height' : $('#canvas_panel').height(),
'width' : $('#canvas_panel').width()
});
//draw_canvas();
var ctx = $(this)[0].getContext('2d');
ctx.drawImage($(this)[0].toDataURL(), 0, 0, $('#canvas_panel').width(), $('#canvas_panel').height());
var img = new Image();
var canvas = $(this)[0];
img.crossOrigin = 'anonymous';
img.onload = function(){
var canvas = cloneCanvas();
var ctx = .getContext('2d');
ctx.drawImage(this, 0, 0, $('#canvas_panel').width(), $('#canvas_panel').height());
};
img.src = $(this)[0].toDataURL();
}感谢
最佳答案
无论何时调整 Canvas 大小时，都需要重新绘制它。因此，在调整大小后调用 draw_canvas(); 函数。新代码将变为
$(window).resize(function() {
$('#canvas_panel > canvas').each(function(i,v) {
if($(this).height() != $('#canvas_panel').height() ||
$(this).width() != $('#canvas_panel').width())
{
$(this).attr({
'height' : $('#canvas_panel').height() + 'px',
'width' : $('#canvas_panel').width() + 'px'
});
draw_canvas();
}
});
});
关于javascript - 如何使 Canvas 调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36621756/