наслоение Canvas для создания фона

С некоторой помощью других участников Stack Overflow. Я создал раздел анимированного холста на веб-сайте, который я создаю.

Я новичок в Canvas, я хочу создать анимированную дугу/окружность.

function animate(elementId, endPercent) {
     var canvas = document.getElementById(elementId);
     var context = canvas.getContext('2d');
     var x = canvas.width / 2;
     var y = canvas.height / 2;
     var radius = 43.5;
     var curPerc = 0;
     var counterClockwise = false;
     var circ = Math.PI * 2;
     var quart = Math.PI / 2;

     context.lineWidth = 9;
     context.strokeStyle = '#c51414';
     context.lineCap = 'butt';

     context.shadowOffsetX = 1;
     context.shadowOffsetY = 1;
     context.shadowBlur = 1;
     context.shadowColor = "#c51414";


     function render(current) {
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.beginPath();
         context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
         context.stroke();
         curPerc++;
         if (curPerc <= endPercent) {
             requestAnimationFrame(function () {
                 render(curPerc / 100);
             });
         }
     }
     render();
 }

animate('skill1', 90);
animate('skill2', 80);
animate('skill3', 45);
animate('skill4', 92);
animate('skill5', 80);
animate('skill6', 65);

Вот сценарий, который я использую в данный момент. Внизу используется

  animate('skill3', 45);

45 в конце — это процент, на который проходит дуга. Вот скрипка, чтобы было легче видеть.

http://jsfiddle.net/dLAVe/

То, что я хочу сделать, это по-прежнему использовать холст, дать каждой дуге полный фоновый круг. Вот изображение того, чего я пытаюсь добиться (я сделал это в фотошопе)

Дуга с фоном

Я не хочу использовать изображение и помещать его под дугу, я уже пробовал это с фоновым изображением на холсте, но я действительно озабочен выравниванием, и для выравнивания фона буквально используются микропиксели. к анимированной арке. Плюс я хочу сделать это с Canvas.

Может ли кто-нибудь помочь мне со скрипкой, как это сделать? Я предполагаю, что это будет наложение анимированной дуги поверх статического круга.

Пожалуйста, помогите, это сводит меня с ума!


canvas animation function html5-canvas jquery-animate
person Blackline    schedule 01.04.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что ж, это скорее вопрос CSS, так как наслоение холстов — это просто проверка того, что они расположены друг над другом. Простым решением было бы создать фоновый холст (назовите его #bgCanvas1), добавить его в разметку рядом с вашим #myCanvas1 и установить для них обоих значение position: absolute, которое размещает их в соответствии с ближайшим позиционированным предком, эффективно складывая их. Чтобы один из них отображался над другим независимо от его позиции в HTML, вы можете установить для свойства z-index одного более высокое значение, чем у другого.

Итак, для CSS, применяя то, что я сказал:

#myCanvas1, #bgCanvas1 {
    position: absolute;
}
#bgCanvas1 {
    z-index: 1;
}
#myCanvas1 {
    z-index: 2;
}

И простое обновление HTML:

<canvas id="myCanvas1" width="250" height="250"></canvas> 
<canvas id="bgCanvas1" width="250" height="250"></canvas>

Вот скрипт для этого: http://jsfiddle.net/dLAVe/2/

Вы могли заметить, что я немного обновил вашу функцию JavaScript, чтобы разрешить передачу цвета круга для рисования. Вы можете настроить его позже и разделить на разные функции, чтобы упростить рисование статического круга на фоновом холсте.

person Dvir Azulay    schedule 01.04.2013