Анимация (Осцилляция) нарисованная форма на холсте

Добрый день.
Я ищу abit совета. Прежде чем судить, пожалуйста, обратите внимание, что я новичок в кодировании, всего лишь несколько недель опыта. Я пытаюсь сделать форму облака, которую я нарисовал на холсте, анимированный, используя JavaScript. (Пожалуйста, см. Ссылку ниже к типу анимации, которую я ищу для достижения.) Я искал везде, как это сделать, но кажется, что все ссылки имеют отношение к фактическому изображению или прямоугольнику, а не к пользовательской фигуре , Поэтому мой вопрос заключается в том, можно ли сделать такую анимацию на пользовательской фигуре, а если нет, то какой лучший способ сделать это для достижения желаемого эффекта.Анимация (Осцилляция) нарисованная форма на холсте

<!DOCTYPE HTML> 
<HTML> 
    <head> 
    <style> 
     body { 
     margin: 100px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
<body> 
    <canvas id="Canvas" width="700" height="600" style="border:1px solid #005BAB;"></canvas> 
    <script> 
    var canvas = document.getElementById('Canvas'); 
    var context = canvas.getContext('2d'); 

    // gradients 
    var grd = context.createRadialGradient(550, 150, 25, 500, 200, 400); 
    grd.addColorStop (0, '#0586f8'); 
    grd.addColorStop (1, '#015baa'); 

     // blue block shadow 
    context.shadowColor = '#999'; 
    context.shadowBlur = 35; 
    context.shadowOffsetX = 8; 
    context.shadowOffsetY = 8; 
    context.globalCompositeOperation = 'source-over'; 
    context.beginPath(); 
    context.fill(); 

     // blue block 
    context.beginPath(); 
    context.moveTo(50, 35); 
    context.lineTo(50, 525); 
    context.lineTo(550, 525); 
    context.lineTo(550, 35); 
    context.closePath(); 
    context.lineWidth = 0; 
    context.strokeStyle = '#999'; 
    context.fillStyle = grd; 
    context.fill(); 

     // cloud shadow 
     context.shadowColor = '#232323'; 
     context.shadowBlur = 20; 
     context.shadowOffsetX = 0; 
     context.shadowOffsetY = 0; 
     context.beginPath(); 
     context.globalAlpha = 0.9; 
     context.fill(); 

     // cloud drawing 
     context.beginPath(); 
     context.moveTo(172, 180); 
     context.bezierCurveTo(145, 180, 120, 234, 185, 240); 
     context.lineTo(375, 240); 
     context.bezierCurveTo(495, 234, 405, 110, 382, 168); 
     context.bezierCurveTo(440, 85, 280, 60, 325, 120); 
     context.bezierCurveTo(320, 42, 190, 60, 200, 120); 
     context.bezierCurveTo(120, 100, 140, 200, 170, 180); 
     context.lineWidth = 1; 
     context.fillStyle = 'white'; 
     context.fill(); 
     context.strokeStyle(); 
     context.lineCap = 'round'; 
     context.lineJoin = 'round'; 
     context.stroke(); 
    </script> 
</body> 
</HTML>

http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

источник

2013-06-06 PsydeStep

Вы можете создать еще один холст JavaScript:

var cloud = document.createElement('canvas'); 
cloud.width = <width of the cloud>; 
cloud.height = <height of the cloud>;

Затем обратить ваше облако на этом холсте. Вы должны настроить свои координаты так, чтобы левая верхняя граница облачного ограничителя была в точке (0, 0). Таким образом, облачный холст настолько велик, насколько это необходимо.

Тогда вы можете обрабатывать свое облако так же, как и изображение.

context.drawImage(cloud, 0, 0);

источник

2013-06-06 12:38:59 bwroga

Большое спасибо, имеет смысл теперь, когда вы это говорите. Я пытался понять это в течение прошлых двух недель, я чувствую себя немного глупо сейчас! haha – PsydeStep

@SydHolmes Рад, что я могу помочь! Если бы я ответил на ваш вопрос, не могли бы вы принять ответ (нажав галочку)? :) – bwroga

Анимация (Осцилляция) нарисованная форма на холсте

ответ

Смежные вопросы