Свързани публикации 'canvas'
Иновации в кода
И как те могат да ви помогнат да започнете да кодирате
Кодът управлява нашите приложения, игри и системи на обществото, но на по-лично ниво кодът е магически пъзел, чудесен за разказване на истории, изкуство и комуникация . Жалко е, че хората пропускат чудесата на кода, мислейки, че не могат да кодират или не искат. Така че, моля, кодирайте с мен - наистина. Само с няколко кликвания и докосвания можем да изследваме магията.
ИНОВАЦИИ 1 & 2 :: Онлайн редакторът и верижното свързване..
Мащабиране и панорамиране с D3.js и canvas
Изграждане на диаграми, които се мащабират с D3.js и Canvas (част 2)
Написано от Maximiliano Duthey , Full Stack Developer @ XOOR
Здравей отново! Тук ще продължим да изграждаме нашия мащабируем график с D3.js и HTML Canvas. Като супер кратко резюме за предишната публикация, научихме как да начертаем точкова диаграма с помощта на D3 върху Canvas вместо най-популярния, но немащабируем SVG подход.
В крайна сметка получихме хубав сюжет, но доста елементарен и скучен, тъй като..
Как да изградите Readwise Highlight Reel в Obsidian Canvas
Чета много , но като повечето хора често забравям пасажите, които съм маркирал, освен ако нямам разумно извинение да ги прегледам отново. Тогава реших, че може би си струва да проуча как мога по-лесно да изведа това съдържание в Obsidian.
Ако сте чели моите последни две статии за Obsidian Canvas, вече знаете как го използвам като табло за управление и затова реших да използвам това, което вече съм създал с някои незначителни допълнения. Харесва ми да наричам тези допълнения..
Game of Life — Реализация на Angular 13
Играйте си с canvas в Angular
Game of Life — внедряване на Angular 13
Проста реализация на платно на Conways „Game of Life“ с помощта на Angular в Stackblitz
въведение
Обикновено пиша за Excel, Power BI и всякакви данни, свързани тук на Meidum.com (доколкото времето ми позволява). Освен това исках да продължа поредицата си със съвети за туризъм в Северна Европа за дълго време. Е, време… 😃
Но днес бих искал да се отклоня в съвсем различна посока, защото някои теми са толкова..
Как да изобразя 10 милиона данни в уеб страница?
Е, искам да кажа, какво изобщо означава това да имаш десетки милиони данни в една диаграма?
За да ви е по-лесно да разберете, нека вземем пример с Full-HD монитор, чиято резолюция е 1920x1080. Общият брой пиксели е около 2 милиона.
И така, за диаграма с десет милиона части от данни това означава, че средно има около 5 части от данни в един пиксел.
Споделих тема за визуализация на големи данни на ApacheCon North America 2019, в която въведох четири аспекта за ускоряване на..
Творческо кодиране — Ден 9
Здравейте Днес научих как да работя с текстови елементи с помощта на канава и библиотека със скици на канава.
Крайният резултат изглежда така:
Както обикновено, къде можете да намерите този урок:
Това е раздел 6 от курса Креативно кодиране: създаване на визуални елементи с JavaScript от Бруно Имбризи .
Този модул изследва типа скица и работата с текстови елементи с помощта на канава.
Ето няколко извода от този модул:
Използване на canvas fillText() и други методи,..
Свързани въпроси 'canvas'
Най-ефективният начин за рисуване на плавни анимации върху карти на Google?
Опитвам се да нарисувам анимация върху google maps, надявам се да използвам елемента canvas на html5. Това възможно ли е? Анимацията е точно по линиите на движещи се и въртящи се правоъгълници (симулиращи транзитни потоци/трафик модели), нищо...
2963 изгледи
schedule
26.09.2022
HTML5 плъзнете и пуснете няколко изображения от едно платно на друго платно
Нов съм в HTML5 и jquery (2 седмици) и трябва да създам плъзгане и пускане на множество изображения от едно платно на друго платно с помощта на jquery и html5 и също трябва да мога да преоразмерявам изображенията (шефът ми ми даде тази задача),...
7032 изгледи
schedule
18.09.2022
Как да направите jQuery функция за html5 canvas
Помислете за просто платно като
$(document).ready(function(){
draw();
});
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");...
1423 изгледи
schedule
18.09.2022
Не може да се кешират данни за изображение от платно
Така че имам функция, която преобразува изображение в нива на сивото. Взема URL адрес за оригиналното изображение и изходно платно, върху което да постави изхода. Функцията работи много бързо на повечето браузъри, но много бавно на мобилните...
276 изгледи
schedule
18.09.2022
Kinetic.js Анимиране на множество групи, които съдържат форма и текст
Нов съм в Kinetic.js. Опитвам се да създам поредица от произволно движещи се групи, всяка от които съдържа една звезда и заглавие. Ето текущата скица: http://jsfiddle.net/dCw9e/ .
Не мога да разбера защо всеки групов обект има уникален набор от...
155 изгледи
schedule
15.09.2022
Как мога да разбера кога HTML5 Canvas е приключил с рисуването?
Аз съм начинаещ в javascript. Опитвам се да преоразмеря изображения от страна на клиента, преди да ги кача на моя сървър за съхранение. Намерих начин да го направя с помощта на HTML5 Canvas:...
5596 изгледи
schedule
19.09.2022
Начертайте контур извън повърхността на пътя
Имам следния код за рисуване на фигури (използван главно за правоъгълници), но изглежда, че функциите за рисуване на HTML5 рисуват граници с дебелина, центрирана върху посочените линии. Бих искал да има граница извън повърхността на формата и съм на...
1776 изгледи
schedule
17.09.2022
Платното зарежда предишно изображение
Имам платно с id cnv.
<canvas id='cnv'></canvas>
Имам функция на javascript, която променя изображението в платно. Изображенията варират.
function changeImageInACanvas(dynamicSource){
var myid_signature =...
49 изгледи
schedule
17.09.2022
Скорост на анимацията на платното
Съставям симулация на градска транспортна система и се опитвам да подобря уменията си за Javascript и Canvas. Предоставих гола версия тук: https://jsfiddle.net/ftmzm9vp/
Два въпроса:
1) Искам „шушулките“ да работят с еднаква скорост. В...
1827 изгледи
schedule
20.09.2022
Как да анимирате линия с помощта на EaselJS и TweenJS
Целта ми е линия да анимирам от точка А до точка Б с помощта на функцията Tween.
Библиотеката за рисуване, която използвам, е EaselJS , а за Tweening използвам TweenJS .
Възможно ли е това да се използва функцията moveTo за анимиране...
2959 изгледи
schedule
17.09.2022
Рисуване върху платно с отделна нишка Android
Здравейте, опитвам се да използвам SurfaceView и Threads, за да рисувам по-бързо върху Canvas. Досега успях да рисувам върху платно, като просто разширих класа View и рисувах в метода onDraw. Освен това имам възможност да преначертая платното, ако...
592 изгледи
schedule
14.09.2022
Откриване на сблъсък на мишката със затворени извити форми на Bezier в Canvas
Моята ситуация:
Работя върху рамка HTML5/Canvas/JavaScript за мащабиране на потребителски интерфейс, която след това използвам за проект за уеб приложение за визуализация на данни. Една от функциите, които ми трябват за моята рамка, е да мога да...
1066 изгледи
schedule
24.09.2022
INDEX_SIZE_ERR при чертане на изображение върху платно
Трябва да нарисувам Image обект на платно, но имам INDEX_SIZE_ERR изключение във Firefox и IE10, но не и в Chrome, нито Safari...
Според W3C : If one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR...
493 изгледи
schedule
25.09.2022
Fabric.js Guides/Bleed Lines
Използвам fabric.js за изграждане на редактор, който ще извежда изображения за печат. Това ще бъдат разпечатки с пълен ръб и имам нужда от начин да покажа полето за маркиране върху всичко останало на платното.
Най-доброто решение, което съм...
1845 изгледи
schedule
26.09.2022
Получаване на местоположението на мишката в платно
Има ли начин да получите местоположението на мишката в таг <canvas> ? Искам местоположението спрямо горния десен ъгъл на <canvas> , а не цялата страница.
76324 изгледи
schedule
02.10.2022
Изрязване на платно / Експортиране на html5 платно с определена ширина и височина
Има стотици уроци за това как човек може да изреже изображение чрез drawImage() върху платно.
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
Имам обаче платно, което изпълва...
32180 изгледи
schedule
02.10.2022
Кой начин да заредите огромно изображение (canvas vs img vs background-image)?
Какво искам
В момента имам png изображение на 4000x4000 . След използване на tinypng.org той стана само 288KB файл.
Сега искам бързият начин да заредя изображението, да го поставя в DOM и да мога да рисувам много платно върху него....
3619 изгледи
schedule
30.09.2022
Плъзнете контролите от контейнера и ги пуснете/начертайте върху платно
Искам да позволя на потребителя да плъзга икони от един div контейнер и да ги пуска и рисува върху платно, запазвайки оригиналната икона непокътната. Иконите се добавят динамично на масата. Също така искам да дам ефект на плъзгане на икона с...
2671 изгледи
schedule
03.10.2022
Чертане на примитив ( GL_QUADS ) върху 2D текстура - не е изобразено четворно, цветът на текстурата е променен
Опитвам се да нарисувам 2D сцена с текстура като фон и след това (докато програмата тече и прави изчисления) рисувам различни примитиви върху "платното". Като тестов случай исках да нарисувам синя четворка върху фоновото изображение.
Разгледах...
2075 изгледи
schedule
03.10.2022
html5 градиент на платно в 4 ъгъла
Има ли някакъв трик за създаване на градиент с множество спирки в 2d пространство? Това, което бих искал да направя, е да създам правоъгълник в моето платно и след това да поставя различен цвят на всеки ъгъл.
Опитах се да създам 4 градиента, по...
1897 изгледи
schedule
04.10.2022
