Jump to content

Canvas через view port


Recommended Posts

Не могу отмасштабировать canvas элемент у которого contenxt использует для центрюги пикселы, а у меня интерфейс на view port юнитах. Есть ли способ версткой вогнать canvas по масштабу при уменьшении размера окна? Сейчас все элементы нормально плющатся. 

Есть идея перегонять px в vw а потом ставить event на resize чтобы context вправил себе мозги, но это не очень удобно со всех сторон. 

Мастера, есть ли другой способ сделать это версткой?

Вот ссылка на задачу: Rebuild (revolvercmf.ru)

Link to post
Share on other sites
12 часов назад, npofopr сказал:

width: 100%; height: 100% для canvas ?

Не работает.

Атрибуты в теге width и height идут в px без обозначения величины, а устанавливаются они через context:

        /* initialise canvas */
        let ctx = g.getContext('2d');

        ctx.canvas.width =  320; //g.closest('body').offsetWidth;
        ctx.canvas.height = 320; //g.closest('body').offsetHeight;

Если мы через атрибут style указываем width и height холст тянется как презик при натягивании и качество рендеринга падает.

vw работает по формуле:

(100 * (100px)) / window.innerWidth

Я переписал движок анимации с px на vw и чуть позже перегоню остальные величины вроде em, pt, pc и так далее тоже.

 

		// Returns metrics and value of given CSS propertie
		numberCSS: (v) => {

			let u = [

				'Q',
				'cap',
				'ch',
				'ic',
				'lh',
				'rlh',
				'px',
				'ex',
				'em',
				'%',
				'in',
				'cm',
				'mm',
				'pt',
				'pc',
				'deg',
				'vmax',
				'vmin',
				'vh',
				'vw',
				'vi',
				'vb',
				'rem',
				'ch',
				'rad',
				'grad',
				'turn',
				'dppx',
				'x',
				'dpcm',
				'dpi',
				'khz',
				'hz',
				's',
				'ms'

			];

			let c = 0;

			for( let i of u ) {

				if( v.includes(i) ) {

					if( i === 'px' ) {

						return [ (100 * +v.replace(i, '')) / self.innerWidth, 'vw' ]; // px to vw

					}

					return [ +v.replace(i, ''), i ];

				}
				else {

					if( c++ === 34 ) {

						if( i === 'px' ) {

							return [ (100 * (v - 0)) / self.innerWidth, 'vw' ]; // px to vw

						}

						return [ v - 0, null ];

					}

				}

			}

		},

 

У меня перед праздниками тугая башка и я ни как не могу понять как статичный холст по window resize отмасштабировать как vw.

Например canvas contenxt был 320x320 при разрешении экрана 1920x1080, а окно уменьшили и холст должен уменьшиться тоже.

Есть идеи какой формулой воспользоваться? Vw и Vh вообще-то могут появиться сами, но кто это сделает нам быстро в браузер? Поэтому хочется просто масштабер наваять на event.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,164
    Total Members
    1,451
    Most Online
    LilyK
    Newest Member
    LilyK
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Метод call дал возможность greet вызвать саму себя?
    • Как легко начать работу на VPS?  Специальное предложение от Tucha Друзья, выбираете shared-хостинг или VPS для сайта и почты? Мы поможем! Виртуальный хостинг (или шаред-хостинг) в облаке на базе сервиса TuchaHosting — решение, которое лучше всего подходит для размещения: ·       веб-сайтов с умеренной нагрузкой; ·       корпоративной почты небольшого объёма. Сервис поможет безопасно разместить ресурсы и обеспечить им стабильную и быструю работу по бюджетной стоимости. В статье напоминаем более подробно обо всех преимуществах shared-хостинга TuchaHosting и множестве его дополнительных полезных возможностей: https://tucha.ua/ru/blog/services/tuchahosting-luchshee-reshenie-dlya-kachestvennogo-khostinga-saytov-i-pochty Если же для почты уже нужен отдельный почтовый сервер или необходимо разместить в облаке высоконагруженный веб-сайт, например: ·       большой корпоративный портал; ·       интернет-магазин с высокой нагрузкой; ·       масштабный сайт-каталог, рекомендуем VPS на базе сервисов TuchaBit, TuchaBit+ или TuchaFlex+. Виртуальные серверы обеспечат бесперебойную работу ресурсов и их отказоустойчивость даже при высоких нагрузках. А для лёгкого старта работы на виртуальных серверах дарим выгодные условия! При заказе акционных конфигураций VPS до 08.02.2021 включительно вы получаете скидку 10 евро* на оплату первого счёта. Специальный промокод — TD-226-0. Чтобы воспользоваться предложением, звоните +380 44 583-5-583 или пишите по адресу sales@tucha.ua  Мы всегда на связи и поможем подобрать решение именно для вас! *В гривнах по курсу НБУ на первое число текущего месяца.
    • Грубо говоря, потому что new просто создает новый объект на основе конструктора, а Object.create – с указанием прототипа. В первом случае в объекте tom инициализируются свойства name, age и gender, но у него не будет определен метод greet. // it's ok tom.name; tom.age; tom.gender; // but Person.greet.call(tom); Во втором случае (Object.create) метод greet будет найден в цепочке наследования (у прототипа).
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...