使用JavaScript调整HTML画布的大小
[英]Resizing html canvas using javascript
问题描述
I'm trying to smoothly resize an html5 canvas element. 
我正在尝试平滑调整html5 canvas元素的大小。 I've cobbled together bits of code and I think the following should work: 我整理了一些代码，我认为以下应该可行：
<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>
...but obviously it doesn't! ...但是显然不是！ The result I'm looking for is a canvas that shrinks to just show the middle part of the circle (something more interesting than a circle will be added later). 我要寻找的结果是缩小到仅显示圆圈中间部分的画布（稍后会添加比圆圈更有趣的东西）。 Is there anything obvious that I'm missing, or am I just doing this the wrong way? 有什么明显的我想念的东西吗？还是我做错了呢？ Ultimately I want to to resize both the canvas and the header together, so getting the canvas resizing to work is stage 1. Any help appreciated... 最终，我想同时调整画布和页眉的大小，因此，调整画布的大小才能正常工作是第1阶段。感谢任何帮助...
(Edit: actually, I ultimately want to resize both the canvas and header in response to a scroll event - which I think means avoiding a css solution - but I want to get this bit working first!) （编辑：实际上，我最终希望对画布和标头同时调整大小以响应滚动事件-我认为这意味着避免使用CSS解决方案-但我想首先使这一点起作用！）
1 个解决方案
解决方案1
1 已采纳 2015-11-04 11:22:03
Here are a few changes to your script that I believe do what you want: 以下是对脚本的一些更改，我相信这些更改可以满足您的要求：
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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.