Недавно добавленный холст Html5 — мощная функция. Предполагается, что все используют ее каждый день, но частота ее использования невысока. Однако, если она не инкапсулирована, код будет очень громоздким. беспорядочный, поэтому обычно используемый рисунок на холсте, рисунок текста. Функция сохранения инкапсулирована, и в настоящее время я ею вполне доволен. Она может быстро выполнять задачи по рисованию на холсте и спокойно реагировать на изменения требований. Требуется только простая настройка.
li-canvas.jsФункция холста Html5 инкапсулирована для облегчения таких функций, как рисование одного изображения, рисование нескольких изображений, рисование изображения с закругленными углами, рисование многострочного текста, автоматический перенос строк, сохранение и загрузка изображений и т. д.
Адрес Github: github.com/501351981/l…
Основные функции• Рисование изображения: рисование одного изображения или нескольких изображений, рисование изображения с закругленными углами • Рисование текста: рисование текста из нескольких абзацев, автоматический перенос строк • Сохранение изображения: получение данных изображения, загрузка изображений в локальное хранилище и поддержка пользовательских названий загруженных изображений. .
установка npm# npm install npm install --save li-canvasпрямая цитата
Импортируйте файлы js непосредственно в html.
<script src=dist/li-canvas.js></script>Как использовать Создать экземпляр
При использовании li-canvas вам необходимо сначала создать экземпляр объекта, new LiCanvas(canvas_id,options), передать идентификатор холста, параметры не являются обязательными, вы можете установить фон холста, стиль текста по умолчанию и т. д.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var Canvas= новый LiCanvas('test') </script></body> ... Рисунок рисунка• Нарисуйте одну картинку.
Вызов addDrawImageTask(image), где параметр image является объектом, включая
src: URL-адрес изображения.
x: координата x верхнего левого угла изображения на холсте.
y: координата y верхнего левого угла изображения на холсте.
ширина: ширина рисунка рисунка
высота: высота рисунка изображения
borderRadius: радиус угла изображения
При вызове addDrawImageTask(image) изображение не рисуется сразу, а добавляется задача рисования. Задача рисования выполняется только при вызове draw(callback), а функция обратного вызова вызывается после завершения выполнения.
Зачем это делать? Поскольку при рисовании изображение необходимо сначала загрузить, это асинхронная операция, поэтому оно сначала добавляется в список задач, а при вызове метода draw() оно выполняется в том порядке, в котором добавляются задачи.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 пиксель, сплошной красный></canvas><img src=./bg.jpg id=img width=0 height=0><script> var bg={ src:document.getElementById('img').src,//или url-адрес картинки x:0,//координата x верхнего левого угла y:0,//y координата верхнего левого угла angular width:1563,/ /Ширина рисунка height:1180,//Высота рисунка borderRadius:0 //Радиус угла изображения} var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(bg) //Добавляем задачу рисования, и рисование не выполняется сразу Canvas.draw(()=>{ console.log(рисование завершено) }) </script></body> ...• Нарисовать несколько графиков
Вы можете вызвать addDrawImageTask(image) несколько раз подряд или передать массив изображений.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 пиксель, сплошной красный></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, ширина:1563, высота:1180, borderRadius:0 } var img2={ src:http://*****.com/***.png, x:0, y:0, ширина: 1563, высота: 1180, borderRadius:0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0, ширина: 100, высота: 100, borderRadius: 0 }, { src: http://*****.com/***.png, x: 0, y: 0, ширина: 100, высота: 100, borderRadius:0 } ] var Canvas = новый LiCanvas('test') Canvas.addDrawImageTask(img1) Canvas.addDrawImageTask(img2) //Несколько вызовов для рисования нескольких изображений Canvas.addDrawImageTask(imgs) //Отрисовка нескольких изображений также может быть достигнута путем прямой передачи массива Canvas.draw(()=>{ console.log(рисование завершено) }) </script> </body> ...• Рисуйте округлые или круглые изображения.
Просто установите borderRadius
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 пиксель, сплошной красный></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, width:100, height:100, borderRadius:50 //Установите радиус скругления. Когда радиус скругления равен половине длины стороны квадрата, это круг} var Canvas=new LiCanvas('test') Canvas .addDrawImageTask(img1) Canvas.draw(()=>{ console.log(рисование завершено) }) </script></body> ... Нарисовать текст• Нарисуйте текст
Вызов addDrawTextTask(text,style)
text: текст, который нужно нарисовать
style: стиль текста, включая x: координата x верхнего левого угла начальной позиции рисования текста.
y: координата y верхнего левого угла фактического положения рисования текста.
Ширина: ширина одной строки текста. Если она превышает ширину, она автоматически переносится.
FontSize: размер текста, целое число, единица измерения — пиксели.
FontWeight: толщина текста жирным шрифтом, жирнее и т. д. или 400, 500, 600... то же, что и CSS-вес шрифта.
FontFamily: текстовый шрифт, такой же, как CSS.
lineHeight: высота строки, целое число, единица измерения: пиксели.
цвет: цвет
MarginBottom: если в тексте несколько абзацев, вы также можете указать расстояние между абзацами.
Отрисовка текста также является асинхронной. На самом деле она не рисуется до тех пор, пока не будет вызван метод draw(callback).
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 пиксель сплошного красного цвета></canvas><script> var Canvas=new LiCanvas('test') Canvas.addDrawTextTask(текст для рисования, { x: 110, y: 496, ширина: 1340, FontSize: 54, FontWeight: «жирный», FontFamily: PingFangSC-Regular, «Microsoft YaHei», SimSun, Arial, «Helvetica Neue», без засечек, lineHeight: 70, цвет:'#1a1a1a', поляBottom:40 }) Canvas.draw(()=>{ console.log(рисование завершено) }) </script></body> ...• Нарисуйте несколько абзацев текста.
Метод 1. Повторный вызов addDrawTextTask(text, style), как указано выше.
Способ 2: текст можно передавать в массиве, а стиль можно использовать совместно.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 пиксель сплошного красного цвета></canvas><script> var Canvas=new LiCanvas('test') Canvas.addDrawTextTask([Отрисовываемый абзац текста 1, Отрисовываемый текстовый абзац 2],{ x:110, y:496, width:1340, FontSize:54, FontWeight:'bolder', FontFamily:PingFangSC-Regular,' Microsoft YaHei',SimSun,Arial,'Helvetica Neue',без засечек, lineHeight:70, color:'#1a1a1a', MarginBottom:40 }) Canvas.draw(()=>{ console.log(рисование завершено) }) </script></body> ...Стиль также может передавать значение по умолчанию при создании экземпляра объекта, чтобы избежать повторной установки некоторых общих стилей.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 пиксель сплошного красного цвета></canvas><script> var Canvas=new LiCanvas('test',{ FontStyle:{ FontSize:20, FontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', MarginBottom:40 } }) Canvas.addDrawTextTask (текстовый абзац, который нужно нарисовать) 1, {x:110, y:496, ширина:1340, }) Canvas.addDrawTextTask(Текстовый абзац для рисования 2, { x:110, y:696, ширина:1340, }) Canvas.draw(()=>{ console.log(рисование завершено) }) </script></ тело> ...Если в нескольких абзацах есть абзац текста, который необходимо установить в разных стилях, вы также можете указать стиль отдельно, как показано ниже, это очень гибко ~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 пиксель сплошного красного цвета></canvas><script> var Canvas=new LiCanvas('test',{ FontStyle:{ FontSize:20, FontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', MarginBottom:40 } }) Canvas.addDrawTextTask([{ text:To Нарисованный текст абзаца 1, размер шрифта: 60 }, текстовый абзац 2, который нужно нарисовать, текстовый абзац 3, который нужно нарисовать], { x:110, y:496, width:1340, }) Canvas.draw(()=>{ console.log(рисование завершено) }) </script></body> ...Сохранить загруженное изображение
• Загрузить фотографии
Скачать в формате png: saveToPng(имя файла)
Загрузить в формате JPEG: saveToJpeg (имя файла)
Загрузить в формате gif: saveToGif (имя файла)
Примечание. Чтобы загрузка изображений вступила в силу, ее необходимо вызвать в функции обратного вызова draw().
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 пиксель, сплошной красный></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, ширина: 1563, высота: 1180, borderRadius: 0 } var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(bg) Canvas.draw(()=>{ Canvas.saveToPng(li-canvas) }) </script ></тело> ...• Получить данные изображения
Иногда мы не хотим загружать изображение. Например, в браузере WeChat мы действительно хотим, чтобы пользователь долго нажимал на изображение, чтобы сохранить его. В этот момент мы хотим, чтобы данные изображения, синтезированные с помощью холста, были вставлены в него. источник изображения.
Вызовите: getImageData() для получения синтезированных данных изображения.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 пиксель, сплошной красный></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, ширина:1563, высота:1180, borderRadius:0 } var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(bg) Canvas. draw(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...Адрес Github: github.com/501351981/l…
Подвести итогВышеуказанное представляет вам редактор: как легко реализовать рисование одного изображения, нескольких изображений, изображений с закругленными углами, однострочного текста, многострочного текста и т. д. в HTML5 с помощью li-canvas. Я надеюсь, что это будет полезно. Если у вас есть какие-либо вопросы, пожалуйста, оставьте мне сообщение, и я отвечу вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!