Играйте с «Холстом»

внешний интерфейс HTTPS SVG Canvas

Автор: меньше сахара

Введение

Canvas — новый для HTML5 элемент HTML, в котором изображения можно рисовать с помощью скрипта (обычно JavaScript). Его можно использовать для создания фотоколлекций или простых (и не очень) анимаций, или даже обработки и рендеринга видео в реальном времени. Холст — это область рисования, определяемая HTML-кодом со свойствами высоты и ширины. Код JavaScript может получить доступ к этой области, подобно другим универсальным 2D API, через полный набор функций рисования для динамического создания графики. Программы Mozilla поддерживают Canvas, начиная с Gecko 1.8 (Firefox 1.5), и Internet Explorer, начиная с IE9. Также поддерживаются Chrome и Opera 9+.

исторические источники

Apple внутри компании использует собственный запуск MacOS X WebKit для приложений, использующих такие виджеты, как Dashboard и браузер Safari. Позже было предложено использовать этот элемент для следующего поколения веб-технологий через браузеры с ядром Gecko (особенно Mozilla и Firefox), Opera и Chrome, а также Рабочая группа по технологии гипертекстовых веб-приложений.

Основное использование холста

  1. Использование тега холста

canvas1

  1. метод холста для проверки возможности поддержки

canvas2

  1. холст рисует графика

canvas3

Система координат

прямоугольник

fillRect( x , y , width , height)  //填充以(x,y)为起点宽高分别为width、height的矩形 默认为黑色

stokeRect( x , y , width , height) //绘制一个空心以(x,y)为起点宽高分别为width、height的矩形

clearRect( x, y , width , height ) // 清除以(x,y)为起点宽高分别为width、height的矩形 为透明

дорожка

beginPath() 新建一条路径一旦创建成功 绘制命令将转移到新建的路径上

moveTo( x, y ) 移动画笔到(x , y) 点开始后面的绘制工作

closePath() 关闭该路径 将绘制指令重新转移到上下文

stroke() 将绘制的路径进行描边

fill() 将绘制的封闭区域进行填充

дуга

arc( x , y , r , startAngle , endAngle ,  anticlosewise ) // 以(x,y)为圆心 r为半径的圆  绘制startAngle弧度 到endAngle弧度的圆弧 anticlosewise默认为false 即顺时针方向 true为逆时针方向

arcTo( x1 , y1 , x2 , y2 , radius ) //根据 两个控制点 (x1,y1) 和 (x2, y2)以及半径绘制弧线 同时连接两个控制点

canvas4

Кривая Безье

Кривая Безье на самом деле является прямой линией

canvas5

Квадратичная кривая Безье

canvas6

кубическая кривая Безье

canvas7

Квадратичная кривая Безье

quadraticCurveTo( cp1x, cp1y , x ,y )   // (cp1x,cp1y) 控制点    (x,y)结束点

кубическая кривая Безье

bezierCurveTo( cp1x, cp1y ,cp2x , cp2y ,x , y )//（cp1x,cp1y）控制点1   (cp2x,cp2y) 控制点2  (x,y)结束点

дополнение стиля

fillStyle = color

strokeStyle = color 

//color 可以为颜色值、渐变对象(并非样式！！！！)


lineWidth  = value  线宽

lineCap = type （butt 、 round 、square）线条末端样式   依次是方形、圆形&突出、方形&突出

canvas8

lineJoin = type （round 、bevel 、 miter）线条交汇处样式 依次是圆形、平角 、 三角形

canvas9


ctx.setLineDash([ 实际长度 , 间隙长度 ]) //虚线 setLineDash接受数组

ctx.lineDashOffet  //设置偏移量

Градиент

var gradient = ctx.createLinearGradient( x1 ,y1 ,x2 ,y2); //线性渐变

var gradient = ctx.createRadialGradient(x1 ,y1 ,r1 ,x2 ,y2 ,r2);//径向渐变

gradient.addColorStop( position , color )// position:相对位置0~1    color:该位置下的颜色

прозрачность

ctx.globalAlpha = value (0~1)

текст

fillText( text , x , y , [,maxWidth]) 在(x,y)位置绘制text文本  最大宽度为maxWidth(可选)

strokeText( text ,x ,y ,[,maxWidth]) 在(x,y)位置绘制text文本边框  最大宽度为maxWidth(可选)

font = value               eg:"100px sans-serif"

рисовать картинки

drawImage( image , x , y , width , height ) image为图片对象、从(x,y)处放置宽高分别为width height的图片

drawImage( image , sx , sy , swidth , sheight ,dx ,dy ,dwidth ,dheight) 切片前四个是定义图像源的切片位置和大小   后四个是定期切片的目标显示位置大小

canvas10

сохранение состояния восстановление

save()

restore()

действие

translate( x , y ) 将canvas原点的移动到 (x,y)     （save&restore保存初始状态！！！）

rotate( angle ) 顺时针方向旋转坐标轴 angle弧度

scale(x,y) 将图形横向缩放x倍、纵向缩放y倍   （ x、y大于1是放大  小于1为缩放！！！）

глобальная операция композиции

globalCompositeOperation = type; source-over

canvas11

source-in

canvas12

source-out

canvas13

source-atop

canvas14

destination-over

canvas15

destination-in

canvas16

destination-out

canvas17

destination-atop

canvas18

xor

canvas19

copy

canvas20

обрезать

clip //只显示裁剪区域内部区域  (使用save & restore 存储canvas状态！！！)

анимация

clearRect() 清空画布

save&restore 保存恢复canvas状态

Выполнение по времени

  • setInterval()
  • setTimeout()
  • requestAnimationFrame()

Смотрите разницу для деталей:блог woo woo woo.cn на.com/smallmatch…

svg

Этикетка

  • прямоугольник
  • круг круг
  • овальный эллипс
  • линия
  • полилиния
  • многоугольник
  • путь путь
  • Текст Текст

Подробные теги:уууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу on.com/SVG/SVG-горячий воздух…

Атрибуты

  • ширина ширина
  • высота
  • css-стиль
  • Цвет заливки Заливка
  • обводка границы цвета
  • ширина границы
  • Начало границы и конец штриха-linecap
  • Стиль линии штрих-dasharray (необходимо заполнить ширину линии и разрыв строки, заполнить цикл в соответствии с порядком)
  • Начальное смещение каждого сегмента линии stroke-dashoffet
  • заполнить прозрачность
  • граница обводки-непрозрачность
  • Правило заполнения графика fill-rule (ненулевое даженечетное)
  • Преобразование действия (центральная точка находится в верхнем левом углу изображения и поддерживает только 2D-преобразование).

Подробности:у-у-у-у. palms.com/WordPress/2…

  • translate(10 ,10 ) or translate(10 10)
  • rotate(20) or rotate(20 , x y) x,y — центральная точка вращения и может быть только единицей измерения градусов по умолчанию
  • scale(x , y)

canvas21

  • свойство viewBox

Подробности:у-у-у-у. palms.com/WordPress/2…

  • viewBox = "x , y , width , height"
  • сохранить свойство AspectRatio

Подробности:у-у-у-у. palms.com/WordPress/2…

canvas22

canvas23

прямоугольник

  • из левого положения х
  • у с верхней позиции
  • Прямоугольник производит закругленные углы rx
  • Прямоугольник создает закругленные углы ry

круг круг

  • точка сх су
  • радиус г

овальный эллипс

  • Координаты центра эллипса cx cy
  • Горизонтальный радиус Rx.
  • вертикальный радиус ry

прямая линия

  • начальная точка x1 y1
  • конечная точка x2 y2

многоугольник

  • Определите координаты x y каждого угла точек многоугольника (например:points="200,10 250,190 160,210")

Кривая полилиния

  • Определите начальную точку полилинии, точку перегиба, ключевые точки (например: points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" )

путь путь

  • M = moveto перемещает кисть
  • L = линияпроводить линию
  • H = от горизонтальной линии до горизонтальной линии
  • V = от вертикальной линии до вертикальной линии
  • C = кривая к кривой
  • S = плавная криваядо плавной кривой
  • Q = квадратичная кривая Безье
  • T = гладкая квадратичная кривая Безье — гладкая кривая Безье
  • A = эллиптическая дуга
  • Z = конечный путь близкого пути

Примечание. Заглавные буквы в приведенной выше команде указывают на абсолютное позиционирование, а строчные — на относительное.

  • Слово
<svg><text x="10" y="20" fill="red" transform="rotate(30,20,40)"></text></svg>

Использование других гиперссылок, tspan textPath и других тегов более подробно не объясняется.

Здесь вы обнаружите, что есть много тегов svg и путь пути трудно вычислить и т. д. Для создания пути рекомендуется использовать редактор svg Здесь мы берем редактор Method Draw в качестве примера.

Используйте URL-адрес учебника:blog.CSDN.net/пожалуйста 1056843325…

Веб-сайт онлайн-инструмента на английском языке:editor.method.ac/

Китайский интернет-сайт:Из .run oh oh by .com/more/SV повсюду…

производительность холста и svg

canvas24

Ссылки по теме:

Оригинальная ссылка:Фирменные блюда Овощи сливы Талант/деталь/69,Вы также можете найти апплет "Техническая группа по продуктам Meicai" в WeChat. Он полон галантерейных товаров и обновляется каждую неделю. Если вы хотите изучить технологии, не пропустите его.

Категории