vachunya
@vachunya
Бог верстки, JS maniac, React bomberman

Как задавать размеры img встраиваемых в canvas посредством JS?

Всем привет ребят, делаю тестовое задание для первого поступления на работу, долго учил HTML и CSS и теперь сверстать страницу не большая проблема, в тестовом задании фоновая планета, но я твердо решил что эта еб*чая планета должна вращаться, сначала запилил gif из видео - 65мб весу - вставил все работает, но 65мб КАРЛ!!! В чем проблема сделать меньше кадров в гиф? - получается гамнисто, а в проекте итак код гамнистый, куда еще гамнистую гифку сувать? Ну ладненько день потерян, го искать решения - и тут вуаля, статья от чувака про canvas и JS - у него его код работает и выглядит как надо.

Это решение вопроса, если бы не одно но, моя картинка и полупрозрачная сфера с тенями вставляются в большом маштабе, мне нужно чтобы высота картинки и собственно сферы были равны высоте блока как у автора - но не знаю как это реализовать, в JS не силен, ПАМАГИТИ, код ниже, закоментил вращение так как оно мне пока не нужно, ссылка на статью афтара кода тоже имеется https://habr.com/ru/post/268975/
HTML


CSS
.space-bg
display: block
width: 100vw
height: 100vh
position: relative
background: url(../img/space.jpg) 0 0 no-repeat
background-size: 100%
#planet
width: 512px
height: 512px
position: absolute
left: 0
top: 0
border-radius: 50%
Ипаный JS
$(function(){

var pl_id = 'planet';

var image = new Image();
image.src = '../img/mars_canvas1.jpg';

// загружаем изображение тени и бликов планеты
var fxShadow = new Image();
fxShadow.src = '../img/planet_shadow1.png';

// определяем длину и высоту элемента canvas
var width = $('#'+pl_id).width();
var height = $('#'+pl_id).height();

// рассчитываем угол вращения планеты
// var beta = 0/900;
// var beta = (beta*Math.PI)/360;
// var l = (Math.sqrt(width*width+width*width))/2;
// var gam = Math.PI - ((Math.PI - (beta * Math.PI)/360)/2) - (Math.PI/4);
// var b = 2*l*Math.sin(beta/2);
// var x = b*Math.sin(gam);
// var y = b*Math.cos(gam);
// var p1 = Math.cos(beta);
// var p2 = Math.sin(beta);

var canvas = document.getElementById(pl_id);
var id = canvas.getContext("2d");

var newMoveWidth = 0;
var newMoveHeight = 0;

var drawPl = function(){

id.clearRect(0, 0, width, height);
// применяем к нашей планете вращение
// id.transform(p1, p2, -p2, p1, x, -y);
// рисуем карту с новыми координатами внутри элемента
id.drawImage(image, newMoveWidth, newMoveHeight, width, height, 0, 0, width, height);
//добавляем тень и блики
id.drawImage(fxShadow, 0, 0, width, height);
// если смещение достигло предела, начинаем сначала
if (newMoveWidth >= 2047.5) newMoveWidth = 0;
else newMoveWidth = newMoveWidth+0.5; // иначе двигаем карту дальше

}

setInterval(drawPl, 50); // запускаем анимацию со скоростью 50 мс.

});
  • Вопрос задан
  • 103 просмотра
Пригласить эксперта
Ответы на вопрос 1
vachunya
@vachunya Автор вопроса
Бог верстки, JS maniac, React bomberman
<div class="space-bg">
      <canvas id="planet">   
      </canvas>
    </div>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы