Прочитав это руководство, Сяобай, новичок в Canvas, также сможет создавать потрясающие спецэффекты.

Canvas

Галантерея автора своя, простым людям не показываю. (Шутя)

Холст — очень практичный инструмент: избавиться от волос может быть трудно или трудно, а всего несколько строк кода могут придать людям привлекательный эффект. Вот ямы, с которыми столкнулся автор на пути разработки холста, и как использовать холст для легкого выполнения некоторых повседневных задач, таких как настройка обмена изображениями и эффекты частиц, которые всем нравятся, такие как X-Bangtian (я не не знаю, считается ли это? , в любом случае это круто).

Правильный способ открыть холст №1

Все знают, что Canvas может делать плавную анимацию и является очень мощным инструментом, но в Canvas нет инструмента, который мог бы помочь нам в отладке, как Dom. Но теперь у Mac есть веб-инспектор (webkit.org/downloads//) может отлаживать холст, а заинтересованные учащиеся могут его попробовать.

Но вот еще один способ помочь вам в отладке Canvas. Canvas — это доска для рисования, на ней можно рисовать что угодно. Но у него нет вспомогательных линий, как у PS, поэтому позиционирование очень сложное.

Создать сетку

  • mark api:
    • context.fillStyle
    • context.textAlign
    • context.font
    • context.textBaseline
    • context.fillRect
    • context.fillText

Поэтому вручную добавить сетку на Canvas недостаточно! Здесь мы можем создать метод для рисования сетки, а затем вызывать его каждый раз при рендеринге, чтобы иметь интуитивное представление о расположении графики. Не надо лишний раз ослеплять.

Сначала нам нужно рассчитать количество мешей и поместить все рассчитанные меши в массив. Хотя мы также можем динамически вычислять положение сетки, с точки зрения производительности все позиции на холсте, которые можно подтвердить перед рисованием, рассчитываются заранее, что может повысить производительность. Здесь я оставляю немного места для значений координат, так что это не полноэкранная сетка.

let Grids=[]
function initGrid(cap,width,height,lineWidth){
  const colNum=Math.ceil(width/cap)-1
  const rowNum=Math.ceil(height/cap)-1
  for(let i=1;i<=colNum;i++){
    Grids.push([[cap*i-1, 0,lineWidth,colNum*cap],[i*cap,cap*i-1,colNum*cap+5,"top"]]) 
  }
  for(let i=1;i<=rowNum;i++){
    Grids.push([[ 0,cap*i-1,rowNum*cap,lineWidth],[i*cap,rowNum*cap+5,cap*i-1,"middle"]])
  }
}
initGrid(cap,canvasWidth,canvasHeight,lineWidth);

После расчета и сохранения информации мы готовы начать рисовать линии. Для ширины линии лучше всего быть четным числом, и тогда позиция смещается на 1 пиксель, а линия центрируется, потому что производительность 0,5 пикселя не очень хороша на некоторых машинах, например округление, которое склонны к отклонениям.

function createGrid(){
  context.fillStyle = 'green';
  context.textAlign="center"
  context.font="24px Arial"
  Grids.forEach((grid)=>{
     context.textBaseline=grid[1][3]
     context.fillRect( grid[0][0],grid[0][1], grid[0][2], grid[0][3])
     context.fillText (grid[1][0],grid[1][1], grid[1][2]);   
  })
}

我们的网格长这样，有没有高大上的感觉

нарисовать геометрическую фигуру

  • пометить API:
    • context.beginPath();
    • context.moveTo (50, 50);
    • context.lineTo (450, 450);
    • context.closePath()

Обратите внимание, что beginPath здесь означает новое начало, то есть текущий граф не имеет ничего общего с предыдущей операцией. closePath означает конец, все возвращается к тому, с чего началось, к точке, с которой началось сначала. lineTo означает рисование линии, рисование прямой линии между двумя точками. Мы можем использовать его с moveTo, moveTo перемещает в текущую точку, но ничего не рисует.

Если мы просто рисуем графику и у нас нет других операций, типа цвет у каждого пути разный или цвет заливки разный, то у moveTo и beginPath схожие функции, но если так, то надо каждый раз beginPath обрезать то же, что и предыдущий. Соединение пути, в противном случае он будет основан на последнем заданном цвете заливки.

Итак, вопрос в том, могу ли я напрямую закрыть путь? Конечно нет, вы можете сказать, что это начинается в начале, но вы не можете сказать, что это заканчивается в конце! Самая большая функция closePath — соединить последнюю точку пути и первую точку пути.

画了个三角形

Резинка

Поскольку Canvas — это холст, каждый раз, когда изображение обновляется, оно очищается, а затем рисуется следующее изображение, иначе оно будет перекрываться. Давайте подумаем об анимации кадра, то есть о динамическом ощущении N картин за 1 с, которое становится движущейся анимацией. Если это непрозрачное изображение, такое как jpg, оно также может быть покрыто слоями.Если это прозрачное изображение PNG, слои будут сложены вместе. Таким образом, функция ластика имеет важное значение.

  • пометить API:
    • context.clearRect (x,y,width,height);

По сути это рисование прямоугольника, а изображение пропадает там, где находится прямоугольник.

被啃过的三角

Играть онлайн по адресу:

See the Pen canvas No.1 by cherryvenus (@cherryvenus) on CodePen.

No.2 Утилиты Canvas

В Canvas есть несколько небольших знаний, которые очень практичны и в основном должны использоваться в повседневной разработке.

image

Пиксели холста

Во-первых, это проблема пикселей.Вы когда-нибудь сталкивались с проблемой размытия Canvas, особенно в мобильных телефонах, это явление особенно очевидно. Так есть ли решение? Ответ, конечно! И это не сложно, всего один атрибут может это сделать!

На самом деле существует два размера Canvas, я не знаю, нашли ли вы его. Один из них — размер холста, а другой — размер стиля холста.

canvas.width=cWidth
canvas.height=cHeight
canvas.style.width=cWidth
canvas.style.height=cHeight

Тогда это решается. Если у нас картинка 1:1 на мобильнике, то она точно будет модульной, но мы уменьшим ширину стиля картинки более чем вдвое, чтобы не было размытия! То же самое верно и для Canvas, если размер стиля меньше, чем размер Canvas. Так насколько он мал? Есть ли стандарт? Займите это сейчасwindow.devicePixelRatioЭтот параметр сообщает нам соотношение пикселей экрана, если нет, то оно равно 2. Вообще говоря, когда соотношение пикселей равно 2, Canvas не будет размытым.

const dpr=window.devicePixelRatio||2
canvas.width=cWidth*dpr
canvas.height=cHeight*dpr
canvas.style.width=cWidth
canvas.style.height=cHeight

О том, как сохранять изображения Canvas

Куда разбросан наш H5? WeChat! Мы часто получаем функцию, позволяющую пользователям сохранять изображения и делиться ими с кругом. Обычно эту картинку пользователь сам себе потом печатает на экран. Наконец синтезировано, сохранено. Так как же Canvas помогает нам сохранять изображения?

Хотя Canvas не может сохранять изображения напрямую, он может генерировать файлы Base64. Мы помещаем Base64 в тег img, и пользователь может свободно сохранять его.

Код тоже очень простойcanvas.toDataURL('image/jpeg');.

Код игры адрес:

See the Pen Canvas No.2 by cherryvenus (@cherryvenus) on CodePen.

No.3 save&restore, резервная функция Canvas

Кода Canvas будет написано много, если вы не будете осторожны, и вам придется писать много контента каждый раз, когда вы создаете новую операцию. В настоящее время нам нужно посмотреть на операцию мультиплексирования Canvas.Одна из них — уменьшить операцию, а другая — уменьшить нагрузку на машину и предотвратить слишком много вычислений.

image

Говоря о Save & Restore, у вас может быть немного, не знаю, что это используется. Я не знаю, что использовать. Мы представляем, что вся конфигурация Canvas, такая как FillSytle, статус StrokeStyle, инкапсулирована в объект, затем каждый объект Save, объект помещается в статус Cavans, затем мы можем его изменить.Некоторые свойства, затем какую конфигурацию нам нужно сделать, Что я должен делать? Снова записать другую конфигурацию атрибута? Нет, на этот раз мы можем использовать восстановление, одной кнопкой в ​​предыдущее состояние. То есть все текущие конфигурации потерпели неудачу. Все значения атрибутов возвращаются в предыдущее состояние. Мы всегда можем восстановить значение по умолчанию, то есть номер состояния CANVAS пуст.

Код игры адрес:

See the Pen Canvas No3 save&restore by cherryvenus (@cherryvenus) on CodePen.

No.4 Наиболее часто используемая комплексная интерпретация drawImage

Аналитическая диаграмма:

image

Лично самое хлопотное в Canvas — отрисовка картинок, метод drawImage может помочь нам доделать функции растяжения, вырезания, увеличения и уменьшения масштаба.

drawImageВсего параметров 9, но обычно их можно сокращать.

Первым параметром должно быть изображение, которое является нашим объектом изображения. Остальные параметры легко перепутать. Давайте посмотрим поближе.

параметр эффект
dx,dy Это лучше всего понять.Это относится к позиции, где изображение начинает рисоваться.Если установлены эти два параметра, оригинальное полное изображение рисуется из этой точки (dx,dy).
dx,dy,dwidth,dheight В дополнение к начальной точке (dx, dy) есть также размер изображения, отображаемого на холсте.Здесь следует отметить, что хотя полное изображение будет нарисовано, оно будет соответствовать размеру dwidth и dheight. , поэтому картинка будет деформирована. .
sx,sy,swidth,sheight,dx,dy,dwidth,dheight Это сложнее для понимания.Первые четыре параметра — это операции над исходным изображением, то есть областью, где получается исходное изображение.Последние четыре параметра — это положение и размер изображения, которое нужно отрисовать на холсте. То есть выделенная область картинки помещается в выделенную область холста.

Адрес игры:

See the Pen Canvas N0.4 by cherryvenus (@cherryvenus) on CodePen.

№ 5. Спецэффекты взрыва X

不高兴扫描了

  • пометить API:
    • context.getImageData для получения информации об изображении

Этот API — самый удивительный метод, потому что он помогает нам получить информацию о цвете холста, с помощью этой информации мы можем воссоздать новые изображения. В этом методе нет ничего плохого, кроме того, что он громоздкий. Поскольку его длина данных соответствуетwidth(宽)*height(高)*4(rgba四个颜色信息)состоит из.

let info=context.getImageData(x,y,width,height)
//返回
data
width
height

Здесь, чтобы избежать обхода данных (data.forEach), для обработки информации об изображении, так как оно очень большое, браузер легко зависает. Лучше получать информацию о цвете текущих координат в соответствии с информацией о местоположении.

Что касается первого спецэффекта, то для его завершения я использовал библиотеку Matter.js. Если это рукописные спецэффекты, то не такие живые и интересные, как эта библиотека.

адрес игры:

See the Pen canvas No5. COOL by cherryvenus (@cherryvenus) on CodePen.

Категории