Question

我在画布上创建了一个云形状，我想知道如何在大小之间来回缩放形状。就像我希望云变得更大，而不是更小，然后更大，然后更小等等。

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

这是我的画布代码：

<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区域滑入视图。第二部分是尝试向上和向下扩展。：

$(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

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

所有变换均适用于 next 绘制的形状，不会影响已绘制的形状。

因此，要使其工作，您需要清除画布，转换然后重绘形状。

例如，重新计算代码因素，以便您可以调用shape()来绘制云，然后：

清除画布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()重新定位与旋转值相关联的形状。

希望这有帮助！

如何在连续循环中缩放画布图像？

1 个答案:

Online demo