Question

我正在尝试顺利调整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>

......但显然它没有！我正在寻找的结果是一个缩小到仅显示圆圈中间部分的画布（稍后将添加一个比圆圈更有趣的东西）。我有什么明显的遗失，或者我只是以错误的方式做这件事吗？最终我想要同时调整画布和标题的大小，因此将画布调整大小起作用是第1阶段。任何帮助都赞赏......

（编辑：实际上，我最终想要调整画布和标题的大小以响应滚动事件 - 我认为这意味着避免使用css解决方案 - 但我希望首先使用它！）

Answer 1

以下是对您的脚本进行的一些更改，我相信您可以执行以下操作：

function f = funk1(x);
f = exp(-3*x.^2)-log(x+0.6)+1./(x-6);
end

使用javascript调整html画布大小

1 个答案: