我正在尝试平滑地调整 html5 canvas 元素的大小。我拼凑了一些代码，我认为以下应该可行:
<body>
<header id='myheader' height='200'>
<canvas id='mycanvas' width='200' height='200'></canvas>
<script>
var mycanvas = document.getElementById('mycanvas');
var context = mycanvas.getContext('2d');
var centerX = mycanvas.width / 2;
var centerY = mycanvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
var animate = function(prop, val, duration) {
var start = new Date().getTime();
var end = start + duration;
var current = mycanvas[prop];
var distance = val - current;
var step = function() {
var timestamp = new Date().getTime();
var progress = Math.min((duration - (end - timestamp)) / duration, 1);
mycanvas[prop] = current + (distance * progress);
if (progress < 1) requestAnimationFrame(step);
};
return step();
};
animate('mycanvas.height', 10, 1000);
</script>
</header>
</body>
...但显然不是!我正在寻找的结果是一个缩小到仅显示圆圈中间部分的 Canvas (稍后将添加比圆圈更有趣的东西)。我是否遗漏了任何明显的东西，或者我只是以错误的方式这样做？最终，我想同时调整 Canvas 和标题的大小，因此调整 Canvas 大小以使其正常工作是第 1 阶段。感谢任何帮助...
(编辑:实际上，我最终想调整 Canvas 和标题的大小以响应滚动事件 - 我认为这意味着避免使用 CSS 解决方案 - 但我想先让这一点工作!)
最佳答案
以下是对您的脚本的一些更改，我相信这些更改可以满足您的要求:
var mycanvas = document.getElementById('mycanvas');
var context = mycanvas.getContext('2d');
var radius = 70;
function draw() {
var centerX = mycanvas.width / 2;
var centerY = mycanvas.height / 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
}
var animate = function(target, prop, val, duration, action) {
var start = new Date().getTime();
var end = start + duration;
var current = target[prop];
var distance = val - current;
var step = function() {
var timestamp = new Date().getTime();
var progress = Math.min((duration - (end - timestamp)) / duration, 1);
target[prop] = current + (distance * progress);
action();
if (progress < 1) requestAnimationFrame(step);
};
return step();
};
animate(mycanvas, 'height', 10, 1000, draw);
关于javascript - 使用 javascript 调整 html Canvas 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33519598/