Поворот изображения холста - PullRequest
Новая
       1

Поворот изображения холста

0 голосов
/ 18 февраля 2019

Изображение для визуализации кода

enter image description here

Вопрос

Есть ликакой-нибудь способ сделать код ниже еще более производительным?Мне кажется, что я что-то упускаю, когда дело касается рендеринга только той части изображения, которая видна, а не всего изображения.

Код 

// ------------
// Setup canvas
// ------------

let rotation = 0;
const ratio = window.devicePixelRatio || 1;
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = canvas.clientWidth * ratio;
canvas.height = canvas.clientHeight * ratio;
const context = canvas.getContext('2d');
context.scale(ratio, ratio);

// ----------
// Load image
// ----------

let imageReady = false;
const image = new Image();
      image.onload = () => {
        imageReady = true;
      }
      image.src = 'https://i.imgur.com/ltOYsck.png';

// --------------
// Animation Loop
// --------------

window.requestAnimationFrame(loop)

function loop() {
  context.clearRect(0,0,canvas.width, canvas.height);

  if (imageReady === true) {
    context.save();
    context.translate(canvas.clientWidth/2, canvas.clientHeight/2 + 1000)
    context.rotate(rotation * Math.PI / 180);
    context.drawImage(
      image,
      0,
      0,
      image.width,
      image.height,
      -image.width/4,
      -image.height/4,
      image.width * 0.5,
      image.height * 0.5
    );
    context.restore();
  }

  rotation += 0.1;
  if(rotation >= 360) rotation = 0;

  window.requestAnimationFrame(loop)
}
canvas {
  width: 1200px;
  height: 200px;
  background: lightgreen;
}

1 Ответ

0 голосов
/ 18 февраля 2019

Этот «Ответ» не отвечает на ваш вопрос относительно вашего кода, так как я думаю, что это неправильный подход, во-первых ...

Я пытаюсь добиться эффекта с помощью4-5 полотен друг на друге вращаются на разных скоростях. Однако после 5 слоев загрузка ЦП в Chrome идет вверх (с 9% до 70%).

... но включает в себя пример, который без проблем вращает 50 ваших слоев. ~ 10% CPU и ~ 15% GPU;на ноутбуке

Причина больших изображений в том, что я хочу, чтобы они выглядели четкими на устройствах Retina, чтобы все было в два раза больше, чем нужно (4400 x 4400)

Особенно, когда вы хотите четкое изображение, вы избегаете пиксельной графики.Изображение, которое вы используете, идеально подходит для преобразования его в вектор.

4400x4400 пикселей означает 4400x4400x4 байта (~ 73 МБ) необработанных данных изображения, которые JS должен перетаскивать при каждом рендеринге (части) этого изображения. 

/*
  // set random rotation speeds for each layer; and a bit more.
  // code is commented out, because at the moment this is defined in the CSS
  let i=1;
  for(let elm of document.querySelectorAll('#example>g')){
    // give this particular elm an initial rotation and add a little scale to it
    const sx = (Math.random() * .2 + .8).toFixed(4);
    const sy = (Math.random() * .2 + .8).toFixed(4);
    const rotate = Math.floor(Math.random() * 360);

    const transform = `scale(${sx},${sy})rotate(${rotate}deg)`;
    const duration = Math.floor(Math.random() * 25000 + 5000) + "ms";

    elm.style.setProperty("transform", transform);
    elm.style.setProperty("animation-duration", duration);

    console.log(`#example>g:nth-child(${i++}){animation-duration:${duration};transform:${transform}}`);
  }
*/
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#example>g>use {
  animation-name: rotate;
  animation-duration: inherit;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  fill: rgba(64, 64, 64, .25);
}

/* the following CSS has been generated by the JS */
#example>g:nth-child(1){animation-duration:6235ms;transform:scale(0.9831,0.9672)rotate(317deg)}
#example>g:nth-child(2){animation-duration:27794ms;transform:scale(0.9849,0.8447)rotate(290deg)}
#example>g:nth-child(3){animation-duration:9000ms;transform:scale(0.8721,0.8287)rotate(149deg)}
#example>g:nth-child(4){animation-duration:13234ms;transform:scale(0.8428,0.8676)rotate(198deg)}
#example>g:nth-child(5){animation-duration:26854ms;transform:scale(0.9927,0.9902)rotate(136deg)}
#example>g:nth-child(6){animation-duration:20110ms;transform:scale(0.9047,0.8027)rotate(158deg)}
#example>g:nth-child(7){animation-duration:23603ms;transform:scale(0.9949,0.8478)rotate(32deg)}
#example>g:nth-child(8){animation-duration:27045ms;transform:scale(0.8898,0.8352)rotate(166deg)}
#example>g:nth-child(9){animation-duration:24821ms;transform:scale(0.8344,0.9232)rotate(127deg)}
#example>g:nth-child(10){animation-duration:11986ms;transform:scale(0.8612,0.8307)rotate(232deg)}
#example>g:nth-child(11){animation-duration:7464ms;transform:scale(0.8422,0.9567)rotate(175deg)}
#example>g:nth-child(12){animation-duration:6435ms;transform:scale(0.9263,0.8725)rotate(330deg)}
#example>g:nth-child(13){animation-duration:29691ms;transform:scale(0.9359,0.9489)rotate(260deg)}
#example>g:nth-child(14){animation-duration:12935ms;transform:scale(0.8948,0.9912)rotate(107deg)}
#example>g:nth-child(15){animation-duration:21544ms;transform:scale(0.8496,0.9085)rotate(120deg)}
#example>g:nth-child(16){animation-duration:16241ms;transform:scale(0.9520,0.8554)rotate(111deg)}
#example>g:nth-child(17){animation-duration:23578ms;transform:scale(0.8677,0.9682)rotate(234deg)}
#example>g:nth-child(18){animation-duration:15650ms;transform:scale(0.8582,0.8700)rotate(54deg)}
#example>g:nth-child(19){animation-duration:11847ms;transform:scale(0.9447,0.9884)rotate(139deg)}
#example>g:nth-child(20){animation-duration:9324ms;transform:scale(0.9153,0.9116)rotate(316deg)}
#example>g:nth-child(21){animation-duration:17702ms;transform:scale(0.9779,0.8993)rotate(37deg)}
#example>g:nth-child(22){animation-duration:13465ms;transform:scale(0.9961,0.8083)rotate(194deg)}
#example>g:nth-child(23){animation-duration:15226ms;transform:scale(0.9492,0.8862)rotate(183deg)}
#example>g:nth-child(24){animation-duration:12913ms;transform:scale(0.8593,0.9157)rotate(28deg)}
#example>g:nth-child(25){animation-duration:23357ms;transform:scale(0.9777,0.8756)rotate(118deg)}
#example>g:nth-child(26){animation-duration:6081ms;transform:scale(0.8035,0.8200)rotate(342deg)}
#example>g:nth-child(27){animation-duration:15580ms;transform:scale(0.8807,0.8166)rotate(242deg)}
#example>g:nth-child(28){animation-duration:18051ms;transform:scale(0.9160,0.8838)rotate(102deg)}
#example>g:nth-child(29){animation-duration:6058ms;transform:scale(0.8111,0.9906)rotate(3deg)}
#example>g:nth-child(30){animation-duration:8070ms;transform:scale(0.9133,0.8374)rotate(60deg)}
#example>g:nth-child(31){animation-duration:16621ms;transform:scale(0.8352,0.9580)rotate(339deg)}
#example>g:nth-child(32){animation-duration:27493ms;transform:scale(0.9611,0.8951)rotate(146deg)}
#example>g:nth-child(33){animation-duration:18659ms;transform:scale(0.8012,0.9420)rotate(234deg)}
#example>g:nth-child(34){animation-duration:26061ms;transform:scale(0.9279,0.8988)rotate(16deg)}
#example>g:nth-child(35){animation-duration:29827ms;transform:scale(0.9939,0.8191)rotate(289deg)}
#example>g:nth-child(36){animation-duration:20111ms;transform:scale(0.9248,0.8385)rotate(107deg)}
#example>g:nth-child(37){animation-duration:17507ms;transform:scale(0.8673,0.9479)rotate(330deg)}
#example>g:nth-child(38){animation-duration:12485ms;transform:scale(0.9069,0.9609)rotate(163deg)}
#example>g:nth-child(39){animation-duration:13963ms;transform:scale(0.8223,0.8398)rotate(195deg)}
#example>g:nth-child(40){animation-duration:9466ms;transform:scale(0.8756,0.9944)rotate(81deg)}
#example>g:nth-child(41){animation-duration:5128ms;transform:scale(0.8159,0.9781)rotate(118deg)}
#example>g:nth-child(42){animation-duration:19802ms;transform:scale(0.8892,0.9996)rotate(55deg)}
#example>g:nth-child(43){animation-duration:15241ms;transform:scale(0.8090,0.9250)rotate(169deg)}
#example>g:nth-child(44){animation-duration:17820ms;transform:scale(0.8080,0.8366)rotate(301deg)}
#example>g:nth-child(45){animation-duration:12900ms;transform:scale(0.8853,0.9383)rotate(298deg)}
#example>g:nth-child(46){animation-duration:27931ms;transform:scale(0.8182,0.9923)rotate(155deg)}
#example>g:nth-child(47){animation-duration:5307ms;transform:scale(0.9641,0.9780)rotate(299deg)}
#example>g:nth-child(48){animation-duration:12744ms;transform:scale(0.8974,0.9224)rotate(121deg)}
#example>g:nth-child(49){animation-duration:28452ms;transform:scale(0.8455,0.8270)rotate(125deg)}
#example>g:nth-child(50){animation-duration:7462ms;transform:scale(0.9797,0.9203)rotate(351deg)}
<svg id="example" version="1" xmlns="http://www.w3.org/2000/svg" viewBox="-2200 -2200 4400 1000">
  <defs><path id="asteroid" d="M-101 2154c-47-5-101-21-161-48-37-16-80-38-115-59l-19-11-19-5c-34-9-119-34-161-46-299-90-509-170-611-235-32-21-49-36-65-59-29-43-69-89-138-158-65-65-125-121-264-245-115-104-126-114-135-128-17-26-36-76-56-143-16-56-28-106-58-234-37-159-51-214-69-266-19-58-35-86-52-94-8-4-15-10-22-21-43-64-86-256-98-436-7-99-3-183 11-239 8-33 15-48 35-74 79-104 183-309 255-502 23-60 36-100 54-166 6-23 14-41 27-67 91-184 347-474 570-642 112-85 208-135 282-146 132-21 195-36 408-96 192-54 296-81 432-110 90-20 116-24 172-29 28-2.5 116-2.5 148 0 116 9 228 32 352 72 118 38 254 96 353 151l16 9 24 23c204 191 424 408 580 571 144 150 252 273 311 351 40 52 77 109 108 164 15 26 46 89 58 115 47 106 79 215 89 308 2.3 20 2 24-3.5 53-33 172-57 334-63 433-3 44-2.5 64 1.4 129 9 147 9 223 2 304-13 141-52 252-117 333-18 22-22 27-41 39-47 31-88 66-133 111-40 41-69 75-107 127-47 64-87 130-148 243-43 78-52 93-73 120-47 58-129 139-211 209-132 111-255 188-347 217-31 10-50 13-76 13-17 0-21-.3-30-2.3-35-8-52-10-94-10-37 0-54 1.1-89 6-89 12-189 40-292 81-47 18-147 49-219 67-53 13-92 21-134 27-20 3-56 3.5-73 1.5z"/></defs>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
  <g><use xlink:href="#asteroid" /></g>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...