javascript - 如何在连续循环中放大和缩小 Canvas 图像？

Question

我在 Canvas 上创建了一个云形状，我想知道如何在更大和更小之间来回缩放该形状。就像我希望云变大，然后变小，然后变大再变小，等等。

我能够使用 when-then 方法上下移动单独的 Canvas 图像，但我不认为该方法可以通过增加 Canvas 大小来工作，因为实际图像保持缩放。

这是我的 Canvas 代码:

<script>
var canvas = document.getElementById('hardware-cloud');
var context = canvas.getContext('2d');

// begin cloud shape-Hardware
context.beginPath();
context.moveTo(180, 80);
context.bezierCurveTo(150, 132, 143, 165, 203, 154);
context.bezierCurveTo(203, 154, 180, 200, 260, 175);
context.bezierCurveTo(297, 231, 352, 198, 344, 185);
context.bezierCurveTo(344, 185, 372, 215, 374, 175);
context.bezierCurveTo(473, 165, 462, 132, 429, 110);
context.bezierCurveTo(473, 44, 407, 33, 374, 55);
context.bezierCurveTo(352, 10, 275, 22, 275, 55);
context.bezierCurveTo(210, 20, 165, 22, 180, 80);

// complete cloud shape-Hardware
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'navy';
context.stroke();
context.fillStyle = 'white';
context.fill();

//font inside hardware cloud
context.beginPath();
context.font = 'bold 15pt Calibri';
context.textAlign = 'center';
context.fillStyle ="navy";  // <-- Text colour here
context.fillText('Why not the electronic store?', 300, 120);
context.lineWidth = 2;
context.strokeStyle = 'grey';
context.stroke();
context.closePath();

//top  hardware circle
context.beginPath();
context.arc(380, 220, 13, 0, Math.PI * 2, false);
context.lineWidth = 5;
context.strokeStyle = 'navy';
context.stroke();
context.fillStyle = 'white';
context.fill();
context.closePath();

//middle hardware circle
context.beginPath();
context.arc(398, 253, 10, 0, Math.PI * 2, false);
context.lineWidth = 5;
context.strokeStyle = 'navy';
context.stroke();
context.fillStyle = 'white';
context.fill();
context.closePath();

//bottom hardware circle
context.beginPath();
context.arc(425, 273, 7, 0, Math.PI * 2, false);
context.lineWidth = 5;
context.strokeStyle = 'navy';
context.stroke();
context.fillStyle = 'white';
context.fill();
context.closePath();
</script>

这是我对 jQuery 的尝试。它的第一部分是让 div 区域滑入 View 。第二部分是放大和缩小的尝试。:

$(document).ready(function(){
$('#hardware').hide();
$('#hardware').show("slide", {direction: "left"}, 400 );

ani();
function ani(){
$.when(
$('#hardware-cloud').effect({
scale: "120"},700),
   $('#hardware-cloud').effect({
scale: "100"},700)
.then(ani));}
});

Answer 1

您可以使用缩放和平移来更改形状的大小。

所有变换都适用于下一个绘制的形状，不会影响已经绘制的形状。

因此，要使其正常工作，您需要清除 Canvas 、变换然后重新绘制形状。

例如重构代码，调用shape()绘制云，则:

• 清除 Canvas ctx.clearRect(0, 0, canvas.width, canvas.height);
• 应用缩放ctx.scale(scaleX, scaleY);
• 可选择使用 ctx.translate(deltaX, deltaY);
转换形状
• 重绘形状shape();
• 在循环中重复使用例如 requestAnimationFrame()。

比例值为 1 = 1:1、0.5 = 一半等。请记住这些变换是累积的(您可以每次使用 setTransform() 设置绝对变换)。

更新

这是您可以执行此操作的一种方法:

var maxScale = 1,  // for demo, this represents "max"
    current = 0,   // angle (in radians) used to scale smoother
    step = 0.02,   // speed
    pi2 = Math.PI; // cached value

// main loop clears, transforms and redraws shape
function loop() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    transform();
    drawShape();
    requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

// set scale based on rotation
function transform() {
    current += step;
    current %= pi2;

    // just play around with different combinations here
    var s = (maxScale * Math.abs(Math.sin(current))) / maxScale + 0.5;

    // set absolute scale
    context.setTransform(s, 0, 0, s, 0, 0);
}

// wrap shape calls in a function so it can be reused
function drawShape() {
    // begin cloud shape-Hardware
    context.beginPath();
    ... rest goes here...

Online demo

此外，您可以使用 translate() 重新定位与旋转值相关联的形状。

希望这对您有所帮助!