Не спать всю ночь суммирует очки знаний «HTML5 Canvas» (всего 10).

HTML
Не спать всю ночь суммирует очки знаний «HTML5 Canvas» (всего 10).

предисловие

Очки знаний html5Canvas являются важными навыками для программистов и разработчиков и часто используются в практической работе.

Недавно я задержался допоздна, чтобы обобщить знания, связанные с html5Canvas. Давайте посмотрим на это вместе:

1. Базовые знания html5Canvas

  • Холст, это холст
  • Элемент Canvas используется для рисования 2D-графики и изображений на веб-страницах.

Сцены, используемые Canvas: 1 — анимация, 2 — игра H5, 3 — диаграмма.

Эффект анимации, загрузка Загрузка:

Эффект игры H5:

Для Canvas нужно освоить:

  1. Рисование на холстелиния, прямоугольник, круги стилизовать их.

2. На холстеГрафические преобразования, градиенты, текст и изображения.3. ХолстПолучение пикселей, затенение и рисование кривых, а также отсечение областей. 4. ХолстАнимация, взаимодействие и за кадромТехнология.

Используйте Canvas для рисования базовой графики

  • Система координат холста
  • Используйте Canvas для рисования линий, прямоугольников, кругов
  • Стиль круга

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

  • размер холста по умолчанию, 300*150
  • Разница между установкой ширины и высоты через HTML, css, JavaScript
  • Размер холста, заданный HTML и JavaScript
  • CSS устанавливает размер холста после масштабирования
  • Начало и направление системы координат (начало находится в верхнем левом углу, направление вправо — это направление x, а направление вниз — это направление y)

Рисование линий, прямоугольников и прототипов

  • Нарисуйте прямые линии:ctx.moveTo(x1,y1)，ctx.lineTo(x2,y2)
  • Чтобы нарисовать круг:ctx.arc(x,y,radius,0,Math.PI*2,true)
  • Нарисуйте прямоугольник: вы можете нарисовать его прямой линией или напрямую использовать (ctx.strokeRect(x1,y1,x2,y2)

beginPath и closePath

  1. beginPath и closePathне в парах
  2. Роль beginPathначать новый путь
  3. Роль closePathзакрыть текущий путь

Стили обводки и заливки

  1. strokeStyle используется для установки стиля кисти, т.е.Стили для линий, кривых, границ
  2. fillStyle используется для установки стиля заливки.
  3. lineWidth используется для установки толщины линии

Графические преобразования, градиенты, текст и изображения в Canvas

  1. Преобразование изображения на холсте
  2. Градиенты на холсте
  3. Текст на холсте
  4. Картины на холсте

Графическое преобразование в Canvas

Графические преобразования все для системы координат:

  • Сковорода:ctx.translate(x,y)
  • Повернуть:ctx.rotate(rad)
  • Масштаб:ctx.scale(x,y)

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

среда ctx, используемая для сохранения и восстановления контекста,Обычно в парах

  • ctx.save(), чтобы сохранить текущий контекст.
  • ctx.restore(), восстановить последний контекст

Градиенты на холсте

  1. Линейный градиент:ctx.createLinearGradient(xStart,yStart,xEnd,yEnd)

(xStart,yStart)- начальная точка отрезка,(xEnd,yEnd)является конечной точкой отрезка. Цвет от начальной точки до конечной точки градиентный.

  1. gradient.addColorStopМожет использоваться для управления цветом градиента.

  2. Градиент можно понимать как цвет

  3. Радиальный градиент:

ctx.createRadialGradient(xStart,yStart, radiusStart,xEnd,yEnd,radiusEnd);

(xStart,yStart)является первоначальным центром первого круга,radiusStart- радиус первого круга,(xEnd,yEnd)является первоначальным центром второго круга,radiusEndрадиус второго круга

Существует градиент цвета между первым кругом и вторым кругом.

Текст на холсте

Текст штриха:ctx.strokeText(text,x,y)

Заполнить текст:ctx.fillText(text,x,y);

Установить стиль шрифта:ctx.font

  • Например:ctx.font="bold 100px sans-serif"
  • Установите горизонтальное выравнивание:ctx.textAlign
  • влево, начало, выравнивание по левому краю, выравнивание по центру, конец, выравнивание по правому краю, выравнивание по правому краю

Установите вертикальное выравнивание:ctx.textBaseline

  • верх, верх, середина, центр, низ, низ
  • Рассчитать ширину текста:ctx.measuerText(text).widthДолжен быть рассчитан после установки стиля шрифта

Изображение холста

3 способа рисовать картинки

  • ctx.drawImage(image,x,y), этот метод рисует картинку в(x,y)куда
  • ctx.drawImage(image,x,y,w,h), этот метод рисует картинку в(x,y), и масштабируется по ширине w, высоте h
  • ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh), этот метод помещает изображение в(sx,sy)Широкая юго-западная, высокая область ш при , тянет к(dx,dy), и масштабируется до широкойdw,высокоdh

Рисовать после загрузки изображения:

Пример:

var img = new Image();
img.src = 'logo.png';
img.onload = function() {
    ctx.drawImage(img,0,0,40,40,0,0,80,80);
}

Рисунок на холсте

  • Рисование графики и получение пикселей Canvas
  • Рисунок тени на холсте
  • Область отсечения холста
  • Рисунок кривой холста

Графическая кисть на холсте

ctx.createPatternВы можете создать режим кисти, который затем можно установить на fillStyle, чтобы заполнить кисть.

  • Прототип функции:ctx.createPattern(image,type)

введите значение:

  • no-repeatне плиточный
  • repeat-xгоризонтально плоский
  • repeat-yПлитка вертикально
  • repeatВсенаправленная мозаика

Манипуляции с пикселями холста

  1. получить пиксели
var imageData = ctx.getImageData(x,y,w,h)

返回的是一维数组：[r1,g1,b1,a1,r2,g2,b2,a2...]
  1. установить пиксель
ctx.putImageData(imageData,x,y)

把imageData放在(x,y)处
  1. установить пиксель
ctx.putImageData(imageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH)

只显示（dirtyX,dirtyY）处的宽dirtyW,dirtyH的区域

Рисунок тени на холсте

  1. ctx.shadowOffsetX:Расстояние смещения тени в направлении x
  2. ctx.shadowOffsetY:Расстояние смещения тени в направлении Y
  3. ctx.shadowColor：цвет тени
  4. ctx.shadowBlur：Радиус размытия тени

Изображение эффекта:

Область отсечения холста

  1. задать путь;
  2. вызвать ctx.clip();
  3. Нарисуйте графику снова.

Canvas вытягивает кривую

Фокслайн:

context.arc(x,y,radius, starAngle,endAngle, anticlockwise)

圆心(x,y)  半径radius
从starAngle到endAngle
anticlockwise代表是否逆时针方向

инструмент для сборки

Canvas Quadratic Curve Example

blogs.site указывает static.com/examples/spec…

blogs.site указывает static.com/examples/spec…

Квадратичный сплайн:

context.quadraticCurveTo(qcpx,qcpy, qx,qy)

Кривая Безье:

context.bezierCurveTo(cp1x,cp1y, cp2x, cp2y, x,y)
  • Анимация холста, закадровая технология Canvas
  1. ctx.clearRect(x,y, width,height)

Чисто(x,y)Начиная с точки, площадь ширины и высоты используется для перерисовки

Что такое внеэкранная технология: технология, которая значительно повышает производительность за счет отрисовки элементов на холсте за пределами экрана, а затем их копирования на холст дисплея.

Использование закадровой технологии:

  • Отрисовка статической сцены особенно ресурсоемка, а отрисовка динамической сцены проста. Чтобы не рисовать статичную сцену каждый раз при обновлении динамической сцены.
  • Как правило, статическая сцена рисуется на внеэкранном холсте, при обновлении динамической сцены происходит копирование статической сцены вместо перерисовки.

Внеэкранная технология:

Рисование графики с одного Canvas на другой метод Canvas:

ctx.drawImage(canvas,x,y),该方法把canvas绘制在(x,y)处

ctx.drawImage(canvas,x,y, w,h),该方法把canvas绘制在(x,y)处，并缩放为宽w,高h

ctx.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)，该方法把canvas中（sx, sy）处的宽sw,高sh的区域，绘制到(dx,dy)处，并缩放为宽dw, 高dh

Знание плагинов canvas

Что такое плагин Canvas, освоить плагины Chart.js, понять плагины Chartist.js и HighCharts.js

(Диаграмма) Плагин Chart.js:www.chartjs.org/

Плагин Chartist.js — это простой адаптивный плагин для диаграмм: поддерживает формат SVG (G ion застрял на .GitHub.IO/chartist - просто...

Плагин HighCharts.js: удобная и быстрая библиотека интерактивных иконок HTML5:www.highcharts.com/

Плагин Chartist.js против плагина HighCharts.js

  • Chartist.js прост в настройке, разделяет css и javascript, адаптивные диаграммы и поддерживает браузеры разных размеров и разрешений.
  • HighCharts.js, совместимый со всеми современными браузерами, включая iPhone, IE, Firefox и т. д.

Отзывчивый макет, удобный пользовательский интерфейс, адаптивный веб-сайт может автоматически настраивать макет интерфейса в соответствии с различными терминалами, разными размерами и различными средами приложений, отображать контент и обеспечивать очень хорошие визуальные эффекты. Адаптивный макет — это веб-сайт, совместимый с несколькими терминалами.

2. Создайте элемент Canvas

Пример:

<style>
#canva {
    border: 1px solid red;
}
</style>
<div>
<canvas id="canva" width="200" height="200"></canvas>
// 绘制宽高200的canvas
</div>
  1. Поток рисования с использованием JavaScript

Когда вы начинаете рисовать, вы должны сначала получить объект элемента Canvas, а затем получить контекст рисования.

Чтобы получить объект Canvas, используйте метод getElementById() объекта документа, чтобы получить его.

var canvas = document.getElementById("canvas")

可以使用通过标签名称来获取对象的getElementsByTagName方法
  1. Создание двухмерного объекта контекста чертежа

Используйте метод getContext(), чтобы получить

var context  = canvas.getContext("2d")
  1. Нарисовать текст на холсте
context.font="98px 黑体"; // 文字样式
context.fillStyle="red"; // 文字颜色
context.textAlign = "center"; // 文字对齐方式
// 绘制文字
context.fillText("达达前端"，100, 123, 234);

Нарисуйте изображение:

Используйте метод drawImage(), чтобы добавить изображение на холст Canvas и нарисовать изображение. Требуются три перегруженных метода:

использовать:

drawImage(image, x, y) 
// 在画布上定位图像
// 方法在画布上绘制图像、画布或视频。
// 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

drawImage(image, x, y, width, height)
// 在画布上定位图像，并规定图像的宽度和高度

drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
// 剪切图像，并在画布上定位被剪切的部分

параметр:

параметр описывать
image Указывает изображение, холст или видео для использования
sourceX Позиция координаты x для начала отсечения
sourceY y координатная позиция для начала отсечения
sourceWidth Ширина обрезанного изображения
sourceHeight Высота обрезанного изображения
destX координата x, где изображение помещается на холст
destY Позиция координаты Y, в которой изображение размещается на холсте.
destWidth Ширина используемого изображения
destHeight Высота используемого изображения

Вставить изображение:

function Draw() {
    // 获取canvas对象
    var canvas = document.getElementById("canvas"); 
    // 获取2d上下文绘图对象
    var context = canvas.getContext("2d"); 
    // 使用Image()构造函数创建图像对象
    var newImg = new Image(); 
    // 指定图像的文件地址
    newImg.src = "../images/dadaqianduan.jpg"; 
    newImg.onload = function () {
        // 左上角开始绘制图像
        context.drawImage(newImg, 0, 0); 
        context.drawImage(newImg, 250, 100, 150, 200); 
        context.drawImage(newImg, 90, 80, 100, 100, 0, 0, 120, 120);
    }
}

Нарисуйте текст «Dada Front End» в Canvas:

// canvas 宽高200
<canvas id="canvas" width="200" height="200"></canvas>
<style type="text/css">
canvas {
    border: 2px solid #ccc;
}
</style>
<script>
    // 获取canvas
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    // 设置字体
    context.font="98px 黑体";
    // 填充
    context.fillStyle="#036";
    // 文本水平位置
    context.textAlign="center";
    // 执行绘制
    context.fillText("达达前端",100, 120, 200);
</script>

3. Нарисуйте прямоугольник

Два метода:

  1. strokeRect() - граница прямоугольника
  2. fillRect() - Заполнить прямоугольную область
  3. strokeStyle - Установить цвет линии
  4. lineWidth - установить ширину линии, ширина по умолчанию равна 1, единица измерения — пиксель.
  5. fillStyle - устанавливает размер области или текстаЦвет заливки

Чтобы нарисовать прямоугольную границу, используйте метод strokeStyle:

// 绘制矩形边框
strokeRect(x,y, width, height);

Чтобы заполнить прямоугольную область, используйте метод fillRect():

// 填充矩形区域
fillRect(x,y,width,height);

нарисовать прямоугольник

// 绘制矩形
function drawRect() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    // 描边
    context.strokeStyle = "#000";
    // 线条宽度
    context.lineWidth = 1;
    // 矩形边框
    context.strokeRect(50,50, 150, 100);
    // 填充
    context.fillStyle="#f90";
    // 矩形
    context.fillRect(50,50,150,100);
}
window.addEventListener("load",DrawRect,true);

Используя метод clearRect, вы можете стереть указанную прямоугольную область:

// 擦除指定的矩形区域
context.clearRect(x,y,width,height)

4. Попробуйте рисовать на холсте

В реальной разработке холст имеет размер по умолчанию 300 * 150.

Пример:

// 为画布设置边框
canvas {
    border: 1px solid #ccc;
}
// 准备画布，默认是300*150
// 设置画布的大小
<canvas width="1200" height="800"></canvas>
// 准备绘制工具
<script>
// 获取元素
var myCanvas = document.querySelector('canvas');
// 获取上下文，绘制工具箱
var ctx = myCanvas.getContext('2d');
// 移动画笔
ctx.moveTo(100,100);
// 绘制直线，轨迹
ctx.lineTo(200,100);
// 描边
ctx.stroke()

Создайте элемент холста

Добавить элемент холста на страницу HTML5

// 规定元素的 id、宽度和高度
<canvas id="myCanvas" width="200" height="100"></canvas>

Графический рисунок

Некоторые концепции для понимания:

  • концепция пути
  • рисунок пути
    • Инсультstroke()
    • заполнениеfill()
  • закрытый путь
    • ручное закрытие
    • закрытие программыclosePath()
  • открыть новый путьbeginPath()

задать стиль

  • состояние кисти
    • lineWidth ширина линии, по умолчанию1px
    • Тип конца строки lineCap:(butt默认)、round、square
    • линияСоедините точку перегиба пересекающейся линииmiter(默认)、round、bevel
    • цвет линии strokeStyle
    • цвет заливки fillStyle
    • setLineDash()установить пунктирную линию
    • getLineDash()Получить коллекцию пунктирной ширины
    • lineDashOffsetУстановите смещение тире (отрицательные значения смещены вправо)

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

  • rect(x,y,w,h)нет независимого пути
  • strokeRect(x,y,w,h)Имеет независимый путь, не влияет на другие чертежи
  • fillRect(x,y,w,h)Имеет независимый путь, не влияет на другие чертежи
  • clearRect(x,y,w,h)Стереть прямоугольную область

Рисование дуги

  • концепция радиана
  • arc()
    • x Абсцисса центра окружности
    • y ордината центра окружности
    • r радиус
    • startAngleначальный угол
    • endAngleконечный угол
    • anticlockwiseНужно ли рисовать против часовой стрелки (по умолчанию false означает по часовой стрелке; true означает против часовой стрелки)

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

  • ctx.font= Установить шрифт 'Microsoft Yahei'
  • strokeText()
  • fillText(text,x,y,maxWidth)
    • напишите текст для рисования
    • координаты x,y, где нарисован текст (нижний левый угол текста)
    • maxWidth устанавливает максимальную ширину текста, необязательный параметр
  • ctx.textAlignГоризонтальное выравнивание текста относительно координат чертежа
    • left
    • center
    • right
    • начать по умолчанию
    • end
  • ctx.directionАтрибутыcss(rtl ltr) start和endсвязанные с этим
    • еслиltr,start和leftстабильная производительность
    • еслиrtl,start和rightстабильная производительность
  • ctx.textBaselineУстановить базовую линию (вертикальное выравнивание)
    • Базовая линия верхнего текста находится прямо над текстом и на некотором расстоянии от него.
    • посередине Базовая линия текста находится посередине текста.
    • снизу Базовая линия текста находится ниже корректуры текста и на некотором расстоянии от него.
    • Базовая линия висящего текста находится прямо над текстом и приклеена к нему.
    • по умолчанию в алфавитном порядке, базовая линия находится ниже и поперек текста
    • идеографический похож на нижний, но не такой же
  • measureText()Получить ширину текста obj.width

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

  • drawImage()
    • три параметраdrawImage(img,x,y)
      • img объект изображения, объект холста, видео объект
      • Верхний левый угол изображения x,y рисуется
    • пять параметровdrawImage(img,x,y,w,h)
      • img объект изображения, объект холста, видео объект
      • Верхний левый угол изображения x,y рисуется
      • w,h Настройка размера рисунка изображения (масштабирование изображения, а не перехват)
    • девять параметровdrawImage(img,x,y,w,h,x1,y1,w1,h1)
      • img объект изображения, объект холста, видео объект
      • x,y,w,h прямоугольная область на картинке
      • x1,y1,w1,h1 прямоугольная область на холсте.

Преобразование координат

  • Pan Перемещает исходную точку холста.
    • translate(x,y)Параметр указывает координаты движущейся целевой точки
  • зум
    • scale(x,y)Параметр указывает коэффициент масштабирования ширины и высоты.
  • вращать
    • rotate(angle)Параметр указывает угол поворота

5. Используйте пути

  1. lineTo()
  2. rect()
  3. arc()
  4. fill()
  5. stroke()

Создание пути рисования

Инструкции:beginPath()和closePath(), которые соответственно представляют собой начало нового пути и закрытие текущего пути

  1. Создайте новый путь, используя метод beginPath().
  2. moveTo(x,y), координаты начала рисования
  3. lineTo(x,y), провести прямую линию к целевым координатам
  4. arc(x,y, radius, startAngle,endAngle, counterclockwise)
  • x,y координаты центра окружности, описывающей дугу
  • радиус окружности радиус
  • startAngle описывает угол начальной точки дуги
  • endAngle описывает угол конечной точки дуги
  • против часовой стрелки, истинное значение, указывающее направление против часовой стрелки, иначе наоборот
  1. rect(x,y, width, height): Xy, координаты начальной точки, ширина прямоугольника, высокая прямоугольная траектория рисования

Метод ClosePath закрывает текущий путь

графический стиль рисования

  1. stokeStyleСвойство задает цвет границы прямоугольника
  2. lineWidthсвойство устанавливает ширину границы
  3. fillStyleсвойство устанавливает цвет заливки

рисовать сетку, размер сетки

var grid = 10;
// 画多少条x轴方向的线，横向的条数，画布的高度
var canvasHeight = myCanvas.height
var canvasWidth = myCanvas.width
// 画布宽高
ctx.canvas.width
ctx.canvas.height
// 网格大小
var gridSize = 10;
var canvasHeight = ctx.canvas.height;
var xLineTotal = canvasHeight / gridSize
// 总线条
var xLineTotal = Math.floor(canvasHeight / gridSize);
for (var i=0; i<=xLineTotal; i++) {
    ctx.beginPath();
    ctx.moveTo(0, i*gridSize-0.5);
    ctx.lineTo(canvasWidth, i*gridSize-0.5);
    ctx.strokeStyle='#eee';
    ctx.stroke();
}
// 画多少条y轴方向的线
var yLineTotal = canvasWidth / gridSize
var yLineTotal = Math.floor(canvasWidth / gridSize);
for (var i=0; i <= yLineTotal; i++) {
    ctx.beginPath();
    ctx.moveTo(i*gridSize-0.5,0);
    ctx.lineTo(i*gridSize-0.5,canvasHeight);
    ctx.strokeStyle='#eee';
    ctx.stroke();
}

Нарисуйте систему координат, определите точку, определите расстояние от края холста, определите длину оси координат, определите размер стрелки и нарисуйте заливку стрелки.

// 绘制坐标系
var space = 20;
var arrowSize = 10;
// 画布宽高
var canvasWidth = ctx.canvas.width;
var canvasHeight = ctx.canvas.height;
// 坐标系
var x0 = space;
var y0 = canvasHeight - space;
// 绘制x轴
ctx.moveTo(x0,y0);
ctx.lineTo(canvasWidth-space, y0);
ctx.stroke();
// 箭头
ctx.lineTo(canvasWidth-space-arrowSize, y0 + arrowSize/2);
ctx.lineTo(canvasWidth-space-arrowSize, y0 - arrowSize/2);
ctx.lineTo(canvasWidth-space, y0);
ctx.fill();
ctx.stroke();
// 绘制y轴
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(space, space);
ctx.stroke();
// 箭头
ctx.lineTo(space+space-arrowSize/2, space + arrowSize);
ctx.lineTo(space-space-arrowSize/2, space - arrowSize);
ctx.lineTo(space, space);
ctx.fill();
ctx.stroke();
// 绘制点
var coordinate = {
    x: 146,
    y: 356
}
// 点尺寸
var dottedSize = 6;
ctx.moveTo(coordinate.x - dottedSize/2, coordinate.y - dottedSize/2);
ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y - dottedSize/2);
ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y + dottedSize/2);
ctx.lineTo(coordinate.x - dottedSize/2, coordinate.y + dottedSize/2);
ctx.closePath();
ctx.fill();

дуговой метод и прямоугольный метод

arc создает круг, rect создает прямоугольник и, наконец, вызывает методы stroke() и fill().

// 圆形
context.arc(100,100,30,0,Math.PI*2,true);

Используйте метод beginPath() для создания нового вложенного пути и метод closePath() для закрытия пути.

провести две прямые линии

function DrawLine() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    // 创建绘制过程
    context.beginPath();
    context.moveTo(50,50);
    context.lineTo(120,120);
    context.lineTo(120,60);
    context.closePath();
    context.strokeStyle="#000";
    // 执行绘制
    context.stroke();
}
  • beginPath() метод запускает путь или сбрасывает текущий путь
  • closePath() метод создает путь от текущей точки к начальной точке

если неbeginPath()метод, при отрисовке графики не создаются подпути, первая графика будет отрисовываться и заполняться дважды во время выполнения.

Графическое сочетание

АтрибутыglobalCompositeOperationНастройка сочетания цветов на холсте

12 видов комбинаций:

стоимость иллюстрировать
copy просто нарисуйте новый график, удалите все остальное
darker Там, где графика перекрывается, цвет определяется путем вычитания двух значений цвета.
destination-atop Существующее содержимое сохраняется только там, где оно перекрывается с новой графикой, а новая графика рисуется после содержимого.
destination-in Там, где новая графика перекрывает существующий холст, существующее содержимое остается, а все остальное содержимое становится прозрачным.
destination-out Там, где новая графика и существующее содержимое не перекрываются, существующее содержимое сохраняет все остальное содержимое и становится прозрачным.
destination-over Новая графика рисуется за существующим контентом
lighter Там, где графика перекрывается, цвет определяется суперпозицией двух цветовых значений.
source-atop Новая графика рисуется только там, где она перекрывается с существующим содержимым.
source-in Там, где новая графика перекрывает существующее содержимое, рисуется новая графика, а все остальное содержимое становится прозрачным.
source-out Рисуйте новую графику только там, где она не перекрывается с существующей графикой.
source-over Новый график рисуется поверх существующего графика.
xor Графика становится прозрачной при сбросе и в других местах при обычном рисовании

рисовать кривую

// 圆形，曲线
arc(x, y, radius, startAngle, endAngle, counterclockwise);
  • x,yкруговой, представляющий дугуКоординаты центра
  • radiusкруговой, представляющий дугурадиус
  • startAngleпредставляющий дугуугол начальной точки
  • endAngleпредставляющий дугуугол конечной точки
  • counterclockwiseЕсли true означает против часовой стрелки, false иначе по часовой стрелке
<style>
// 画布背景颜色
#canvas {
    background: #000;
}
</style>
// 画布宽度400
<canvas id="canvas" width="400" height="400">
<script>
 var canvas = document.getElementById('canvas');
 var context= canvas.getContext('2d')
 // 开始
 context.beginPath();
 // 绘制圆形
 context.arc(100, 100, 50, 0, Math.PI*2, true);
 // 关闭
 context.closePath();
 // 填充颜色
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
</script>

При использованииcssУстановите ширину и высоту, холст будет следовать за300*150масштабируется до отношения300*150страница отображается в400*400в контейнере.

// 设置画布宽度
var cx = canvas.width = 400;
var cy = canvas.height = 400;

Используйте js для динамической установки ширины и высоты.

Рекомендуется использовать ширину и высоту в HTML или js для динамической установки ширины и высоты.

Создайте тег холста, первый шаг:

// 获取这个canvas的上下文对象
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

метод:

  • fill()заполнить путь
  • stroke()Инсульт
  • arc()Создать дугу
  • rect()Создать прямоугольник
  • fillRect()нарисовать прямоугольную область пути
  • strokeRect()Нарисуйте прямоугольник
  • clearRect()Очищает указанные пиксели в заданном прямоугольнике
  • beginPath()Запустить путь или сбросить текущий путь
  • moveTo()Переместить путь в указанную точку на холсте, не создавая линию
  • lineTo()Добавьте новую точку, создайте линию на холсте от этой точки до последней указанной точки
  • clip()Вырезать области любой формы и размера из исходного холста
  • arcTo()Создание дуги/кривой между двумя касательными
  • quadraticCurveTo()Создайте квадратичные кривые Безье
  • bezierCurveTo()Создайте кубическую кривую Безье
  • isPointInPath()true, если указанная точка находится на текущем пути, иначе false

Вспомогательные линии рисуют дуги:arcTo()метод

грамматика:

// 辅助线绘制弧线
arcTo(x1, y1, x2, y2, radius)

Метод arcTo() рисует дугу

Код:

// 绘制一条弧线
function draw() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    // 开始绘制
    context.beginPath();
    // 移动点
    context.moveTo(80, 120);
    // 绘制线条
    context.lineTo(150, 60);
    context.lineTo(180, 130);
    // 描边
    context.strokeStyle="rgba(0,0,0,0.4)";
    context.lineWidth=2;
    context.stroke();
    context.beginPath();
    context.moveTo(80,120);
    context.arcTo(150,60,180,130,50);
    context.strolkeStyle="rgba(255,135,0,1)";
    context.stroke();
}

Нарисуйте квадратичный сплайн

quadraticCurveTo()метод:

quadraticCurveTo(cpX, cpY, x, y);
// cpX, cpY描述了控制点的坐标，x, y描述了曲线的终点坐标

Нарисуйте кривую Безье

bezierCurveTo()Метод: это математическая кривая, применяемая к приложениям 2D-графики.

bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);
// cp1X, cp1Y 表示第一个控制点的坐标 
// cp2X, cp2Y 表示第二个控制点的坐标 
// x, y表示曲线的终点坐标

Постройте кривую:

function draw() {
    // 绘制曲线
    var canvas = document..getElementById('canvas');
    var context = canvas.getContext('2d');
    // 开始绘制
    context.beginPath();
    // 移动
    context.moveTo(100,180);
    // 连线
    context.lineTo(110,80);
    context.moveTo(260,100);
    context.lineTo(300,200);
    // 描边
    context.strokeStyle="rgba(0,0,0,0.4)";
    // 设置宽度
    context.lineWidth=3;
    context.stroke();
    context.beginPath();
    context.moveTo(100,180);
    // 绘制贝济埃曲线
    context.bezierCurveTo(110,80,260,100,300,200);
    // 设置宽度
    context.lineWidth = 3;
    context.strokeStyle="rgba(255,135,0,1)";
    context.stroke();
}

четверть круга

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 画布宽度200
var canX = canvas.width = 200
var canY = canvas.height = 200;
// 开始绘制
context.beginPath();
// 四分之一圆
context.arc(100, 100, 50, 0, Math.PI*0.5, false);
context.strokeStyle="white"
context.stroke();

context.beginPath();
context.lineTo(200, 200);
context.lineTo(200, 100);
context.lineTo(100,50);
context.strokeStyle = '#fff';
context.stroke();
  • lineCapЗадает или возвращает строкуконец стиля точки останова
  • lineJoinустановить или вернутьКогда две линии пересекаются, создается тип угла
  • lineWidthустановить или вернутьтекущая ширина линии
  • miterLimitустановить или вернутьМаксимальная длина миры
  1. fillRect()нарисовать сплошной прямоугольник
  2. strokeRect()нарисовать пустой прямоугольник

установить тень,shadowBlur -context.shadowBlur = 20

  • createLinearGradient()СоздайтеЛинейный градиент
  • createPattern() Повторяет указанный элемент в указанном направлении
  • createRadialGradient()СоздайтеРадиальный/круговой градиент
  • addColorStop()Указывает, что в объекте градиентаЦвет и положение остановки 
gradient.addColorStop(stop,color)
  1. scale()Масштабирование текущего рисунка, чтобы сделать его больше или меньше
  2. rotate()Повернуть текущий рисунок
  3. translate()Переназначить (0,0) положение холста

6. Используйте изображения

Вставка изображений тремя способами

function draw() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    // image实例
    var newImg = new Image();
    newImg.src='../images/dada.jpg' // 指定图像的文件地址
    newImg.onload = function(){
        // 绘图
        context.drawImage(newImg, 0, 0);
        context.drawImage(newImg, 250,100, 150,200);
        context.drawImage(newImg, 90,80,100,100,0,0,120,120);
    }
}

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

7. Рисуем градиент

Предусмотрено два метода создания градиента:

// 创建线性渐变
createLinearGradient()方法

// 创建径向渐变
createRadialGradient()方法

Установите цвет градиента и метод перехода

Синтаксис следующий:

  1. offset — значение с плавающей запятой в диапазоне от 0,0 до 1,0.

Указывает часть между начальной и конечной точками градиента 2. 0 смещения — это начальная точка, 1 — конечная точка.

addColorStop(offset, color);

Нарисуйте прямоугольник с линейным градиентом

function draw() {
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext('2d')
    // 创建渐变对象，线性渐变
    var grd = context.createLinearGradient(0,0,300,0)
    // 设置渐变颜色
    grd.addColorStop(0, '#xxx'); // 设置颜色
    grd.addColorStop(1, '#xxx'); // 设置颜色
    // 将填充样式设置为线性渐变对象
    context.fillStyle = grd;
    context.fillRect(0,0,300,80);
}

Нарисуйте прямоугольник с радиальным градиентом

function draw() {
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext('2d')
    // 径向渐变
    var grd = context.createRadialGradient(50,50,0,100,100,90);
    // 设置渐变颜色以及方式
    grd.addColorStop(0,'#xxx');
    grd.addColorStop(1,'#xxx');
    context.fillStyle = grd;
    context.beginPath();
    // 圆形
    context.arc(100,100,90,0,Math.PI*2,true);
    context.fill();
}

свойства штриха

Свойства окончания строки:lineCap,ВыражатьУказывает, как рисуются концы линийстоимость:lineCap: butt, round, square, когда линия имеет определенную ширину для отображения.

butt
// 定义了线段没有线帽
round
// 定义了线段的末端为一个半圆形的线帽
square
// 定义了线段的末端为一个矩形的线帽

Свойства соединения для линийlineJoin, используется для соединения двух линий с:

miterВнешние края двух сегментов линии удлиняются до пересечения.Атрибут miterLimit используется для описания того, как нарисовать пересечение двух сегментов линии, и представляет собой отношение длины расширения к длине линии.

По умолчанию 10, толькоmiterЭффективен при использовании

lineJoin = [value];

round 
// 两条线段的外边缘应该和一个填充的弧结合
bevel 
// 两条线段的外边缘应该和一个填充的三角形相交

8. Узор

Синтаксис следующий:

createPattern(image, repetitionStyle)
  1. repeatУказывает, что изображение циклически замощено во всех направлениях.
  2. repeat-xУказывает, что изображение циклически мозаично расположено по горизонтали.
  3. repeat-yУказывает, что изображение циклически мозаично расположено по вертикали.
  4. no-repeatУказывает, что изображение используется только один раз
function draw() {
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext('2d')
    var img = new Image(); 
    // 使用Image()构造函数创建图像对象
    img.src='../images/xxx' 
    // 指定图像的文件地址
    img.onload = function() {
        // 绘图模式
        var ptrn = context.createPattern(img, 'repeat');
        // 填充样式
        context.fillStyle = ptrn;
        // 填充矩形
        context.fillReat(0,0,500,200);
    }
}

Мобильные изменения:

// 移动
translate(dx,dy);
// 绘制
function draw() {
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext('2d')
    // 设置移动偏移量
    context.translate(200, 200);
    // 绘制一个圆形
    ArcFace(context);
}
// 绘制一个圆形
function ArcFace(context) {
    // 绘制一个圆形边框
    context.beginPath();
    // 绘制圆形
    context.arc(0,0,90,0,Math.PI*2,true);
    // 线宽
    context.lineWidth=5;
    // 描边
    context.strokeStyle='#f90';
    context.stroke();
    // 绘制
    context.beginPath();
    context.moveTo(-30, -30);
    context.lineTo(-30, -20);
    context.moveTo(30, -30);
    context.lineTo(30, -20);
    context.moveTo(-20, 30);
    // 曲线
    context.bezierCurveTo(-20, 44, 20, 30, 30, 20);
    context.strokeStyle='#000';
    context.lineWidth=10;
    context.lineCap = 'round';
    // 笑脸😀
    context.stroke();
}

Преобразование масштаба, синтаксис следующий:

scale(sx, sy);
// sx为水平方向上的缩放因子，sy为垂直方向上的缩放因子

// 示例
function draw() {
    var canvas = document.getElementById('canvas')
    var context = canvas.getContent('2d')
    // 移动
    context.translate(200,200);
    // 缩放
    context.scale(0.5,0.5);
    ArcFace(context);
}

Преобразование вращения:

rotate(angle)

// 旋转例子
function draw() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d')
    context.translate(200,200);
    // 旋转
    context.rotate(Math.PI/6);
    context.scale(0.5, 0.5)
    ArcFace(context)
}

Деформация прямоугольника, синтаксис следующий:

transform(m1x,m1y,m2x,m2y,dx,dy); // 移动，缩放，旋转

1. 移动translate (dx, dy)
2. 缩放scale (sx,sy)
3. 旋转rotate (A)

9. Используйте текст

Как нарисовать текст:

  1. fillText(text, x, y, maxwidth)
  2. strokeText(texxt, x, y, maxwidth)
  • textУказывает текст, который нужно нарисовать
  • Параметр x представляет рисунок текстаНачать абсциссу
  • Параметр y представляет рисунок текстаОрдината начальной точки
  • параметрmaxwidthУказывает максимальную ширину отображаемого текста

Лист свойств текста:

Атрибуты иллюстрировать
font стиль шрифта массива
textAlign start,end,left,right,center
textBaseline top,hanging,middle,alphabetic,ideographic,bottom

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

// 绘制文本示例
function draw() {
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext('2d')
    // 填充颜色
    context.fillStyle = '#000';
    context.font = 'bold 12px impact';
    // 绘制文本
    context..fillText('达达前端，魔王哪吒', 10, 10);
    context.strokeStyle = '#000';
    context.font = 'bold italic 12px impact';
    // 绘制文本
    context.strokeText('jeskson', 10, 10);
}

нарисовать, чтобы получить ширину текстаmeasureText()метод:

measureText(text)

Измерьте ширину текста:

function draw() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.fillStyle='#000';
    context.font='bold 10px impact';
    // 测量文本的宽度
    var tm = context.measureText(txt);
    context.fillText(txt,10,10);
    context.fillText(tm.width, tm.width+10, 50);
    context.strokeStyle = '#000';
    context.font = 'bold italic 10px impact';
    // 测量文本的宽度
    tm = context.measureText(txt);
    context.strokeText(txt,10,10);
    context.strokeText(tm.width, tm.width+10, 100);
}

эффект тени

Лист свойств тени:

Атрибуты иллюстрировать
shadowColor Используйте полупрозрачный цвет
shadowOffsetX Величина бокового смещения тени
shadowOffsetY Величина вертикального смещения тени
shadowBlur Размытие по Гауссу

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

  1. метод сохранения состоянияsave()
  2. Метод восстановления состоянияrestore(), восстановить последнее сохраненное состояние

Сохранение и восстановление государствачерез стек данных

10. Управление пикселями

  1. объект данных изображенияImageData
  2. Как получить данные изображенияgetImageData(), для начала сCanvasПолучите данные изображения в контексте.getImageData(sx, sy, sw, sh);
  3. метод рисования данных изображенияputImageData()

getImageData(imagedata,dx,dy[,..])4. Методы создания данных изображенияcreateImageData()

рисовать плакат

<template>
	<view class="backgroundColor">
	    // 画布
		<canvas class="isCan" canvas-id="dadaPoster" :style="{ width: cansWh.cansWidth + 'px', height: cansWh.cansHeight + 'px' }"></canvas>
		// 效果图
		<image class="showImg" mode="aspectFit" v-if="tempImgShow" @longpress="longpress" :src="tempImg"></image>
		// 按钮
		<view v-if="tempImgShow" class="fixedBox flex flex-direction">
			<view class="boxTop text-white">长按图片发送给朋友</view>
			<view class="boxDown">
				<button class="flexBtn" hover-class="btnHover" @click="closeCans">关闭</button>
			</view>
		</view>
	</view>
</template>
data() {
	return {
		tempImgShow: false,
		tempImg: '',
		cansWh: { // 画布宽高
			cansWidth: 800,
			cansHeight: 900,
		},
		qrcode: { // 举例二维码
			top: 0.85,
			left: 0.035,
			width: 0.23,
			qrHeight: null,
		},
		...
		productImg: { // 产品图
			top: 0.1,
			left: 0.03,
			width: 1,
			height: 0.5,
		},
	};
},

// 绘制图
drawImg(method,param){
	return new Promise((resolve, reject)=>{
		if(param.url.indexOf('http') === 0){
			uni.downloadFile({
				url: param.url,
				success(res) {
					param.url = res.tempFilePath
					method(param).then(res=>{
						resolve(res)
					}).catch(err=>{
						reject(err)
					})
				},
				fail(error) {
					console.log(error)
				}
			})
		}else{
			method(param).then(res=>{
				resolve(res)
			}).catch(err=>{
				reject(err)
			})
		}
	})
}

// 绘制圆形
drawCircle(param) {
var that = this,x = param.x,y = param.y,r = param.r,url = param.url;
return new Promise((resolve, reject) => {
	x = Math.ceil(that.cansWh.cansWidth * x);
	y = Math.ceil(that.cansWh.cansHeight * y);
	r = r > 1 ? r : Math.ceil(that.cansWh.cansWidth * r);
	that.ctx.save();
	var d = 2 * r;
	var cx = x + r;
	var cy = y + r;
	that.ctx.arc(cx, cy, r, 0, 2 * Math.PI);
	that.ctx.clip();
	that.ctx.drawImage(url, x, y, d, d);
	that.ctx.restore();
	that.ctx.draw(true, res=>{
		resolve();
	});
});
}

// 绘制图
drawPic(item) {
return new Promise((resolve, reject) => {
	let x, y, w, h, r;
	y = item.sTop <= 1 ? this.cansWh.cansHeight * item.sTop : item.sTop;
	w = item.sWidth <= 1 ? this.cansWh.cansWidth * item.sWidth : item.sWidth;
	h = item.sHeight <= 1 ? this.cansWh.cansHeight * item.sHeight : item.sHeight;
	if (item.sLeft == 'center') {
		x = item.sWidth <= 1 ? this.cansWh.cansWidth * (0.5 - item.sWidth / 2) : this.cansWh.cansWidth * 0.5 - item.sWidth /
			2;
	} else {
		x = this.cansWh.cansWidth * item.sLeft;
	}
	if (item.r) {
		r = item.r;
		this.ctx.save();
		if (w < 2 * r) r = w / 2;
		if (h < 2 * r) r = h / 2;
		this.ctx.beginPath();
		this.ctx.moveTo(x + r, y);
		this.ctx.arcTo(x + w, y, x + w, y + h, r);
		this.ctx.arcTo(x + w, y + h, x, y + h, r);
		this.ctx.arcTo(x, y + h, x, y, r);
		this.ctx.arcTo(x, y, x + w, y, r);
		this.ctx.closePath();
		this.ctx.clip();
		this.ctx.drawImage(item.url, x, y, w, h);
		this.ctx.restore(); // 返回上一状态
	} else {
		this.ctx.drawImage(item.url, x, y, w, h);
	}
	this.ctx.draw(true, res=>{
		resolve();
	});
});
}

// 保存
saveCans() {
let tempRatio = 1;
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: this.cansWh.cansWidth * tempRatio,
height: this.cansWh.cansHeight * tempRatio,
destWidth: this.cansWh.cansWidth * tempRatio * 2,
destHeight: this.cansWh.cansHeight * tempRatio * 2,
canvasId: 'dadaPoster',
success: (res) => {
	this.tempImg = res.tempFilePath;
	setTimeout(() => {
		this.tempImgShow = true;
	}, 100);
	uni.hideLoading();
},
fail: (res) => {
	console.log(res);
	uni.hideLoading();
}
},
);
}

резюме

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

// canvas标签的使用
<canvas width="100" height="100"></canvas>
// 获取canvas
var canvas = document.getElementById('target')
if(canvas.getContext) {
    var ctx = canvas.getContext('2d');
}else {
    alert('该浏览器版本过低，请更换')
}

// 矩形
fillRect( x , y , width , height) // 填充
strokeRect( x , y , width , height) // 空心
clearRect( x, y , width , height ) // 清除透明 
var grd = ctx.createLinearGradient( x1 ,y1 ,x2 ,y2); //线性渐变
var grd = ctx.createRadialGradient(x1 ,y1 ,r1 ,x2 ,y2 ,r2);//径向渐变

изгиб

  1. Квадратичная кривая БезьеquadraticCurveTo( cp1x, cp1y , x ,y )

(cp1x,cp1y) 控制点 (x,y)结束点2. Кубическая кривая БезьеbezierCurveTo( cp1x, cp1y ,cp2x , cp2y ,x , y ) （cp1x,cp1y）控制点1 (cp2x,cp2y) 控制点2 (x,y)结束点

Плакат о создании чертежей HTML5

<body>
    <img src="img/bg.png" id="img1" style="display: block" width="1200" height="800" />
    <img src="img/dada.png" id="img2" style="display: block" width="100" height="100" />
    <img id="img3" />
    <button onclick="draw()" id="btn">点击下载</button>
    
    <script>
        function draw() {
            var img1 = document.getElementById("img1"),
            var img2 = document.getElementById("img2"),
            var img3 = document.getElementById("img3");
            
            var img1.width = 1200;
            var img1.height = 800;
            var img2.width = 100;
            var img2.height = 100;
            
            var canvas = document.createElement("canvas"),
                context = canvas.getContext("2d");
            // 绘制宽度
            canvas.width = img1.width;
            // 绘制高度
            canvas.height = img1.height; 
            /**
             * context.drawImage(image,x,y,w,h)
             * var img=new Image(); img.src="url(...)";
             * x:绘制图像的x坐标
             * y:绘制图像的y坐标
             * w:绘制图像的宽度
             * h:绘制图像的高度
             */
             
            context.drawImage(img1, 0, 0, img1.width, img1.height);
            // 将 img2 加入画布
            context.drawImage(img2, 100, 100, img2.width, img2.height);
            // 文字填充颜色
            context.fillStyle = '#333';
            // 文字字体
            context.font = 'bold 45px 黑体';
            // 设置文字
            var name_text = '达达前端，魔王哪吒';
            // 获取文字的宽度
            var name_width = context.measureText(name_text).width;
            // 获取除去文本后的一半的宽度
            var x = (canvas.width - name_width) / 2;
            
            /**
             * context.font:设置字体样式
             * context.textAlign:水平对齐方式
             * context.textBaseline:垂直对齐方式
             * context.measureText(text):计算字体长度(px)
             */
            context.fillText(name_text, x, 450);
            context.fillStyle = '#333'; // 文字填充颜色
            context.font = '25px bold 黑体';
            var con_1 = 'dadaqianduan';
            var con_2 = '达达';
            /**
             * text:要绘制的文字
             * x:文字起点的x坐标轴
             * y:文字起点的y坐标轴
             */
            context.fillText(con_1, x, 400);
            var con_width_2 = context.measureText(con_2).width;
            context.fillText(con_2, canvas.width - x - con_width_2, 400);
            context.stroke();
            // 将画布内容导出
            var src = canvas.toDataURL();
            img3.src = src;
            const a = document.createElement("a");
            a.href = src;
            a.download = '自定义.png';
            a.click();
        }
    </script>
</body>

операция рисования html5 (html2canvas)

script引入文件

html2canvas(content, { //content是将要截图的div元素
    scale: 2,
    logging: false,  //在console中输出信息
    useCORS: true  //允许跨域
    //proxy: string,   //代理地址
    //timeout: number   //超时时间
}).then(function(canvas) {
    let dataUrl = canvas.toDataURL()
    console.log(dataUrl)
})

crossOriginсвойство установлено наAnonymousМеждоменный? - Ни в коем случае!

  1. Предыстория решения междоменных проблем
  2. Превратиться вbase64Формат (бэкенд, интерфейс, рекомендуемый интерфейс)

Мобильный терминал HTML5 генерирует постеры

Приблизительный эффект:

<script>
var code_model = '<div id="qrcode" style="position: fixed; opacity: 0;"></div>', // 放置二维码
    canvas_model = '<canvas width="1200" height="800" style="position: fixed;opacity:0;" id="myCanvas"></canvas>', // 放置canvas
    poster_model = '<div class="poster_container"><div class="poster"><img src="" alt="" class="poster_img"><p class="save_poster">长按保存图片至手机相册</p><p style="margin-top: 0.5rem" class="aaaa"></p></div></div>';
    //poster_model为效果图
$("body").append(code_model, canvas_model, poster_model);
$.ajax({
    url: "/photo/dada",
    data: {
        id: id
    },
    success: function (res) {
        $.hideLoading();
        if (res.e = "1111") {
            if (!res.data.is_buy) {
                location.href = res.data.jump_url;
                return false;
            }
            $(".poster").show();
            
            var data_base = res.data.poster_info;
            new QRCode('qrcode', {
                text: data_base.url,
                width: 100,
                height: 100,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            });
            var c = document.getElementById("myCanvas"), 
            cxt = c.getContext("2d");
            var img = new Image(), imgUrl, personName = data_base.name;
            //跨域问题
            img.crossOrigin = 'anonymous';
            img.src = data_base.image;
            img.onload = function () {
                //图片加载为异步加载
                cxt.drawImage(img, 0, 0);
                cxt.save();
                cxt.beginPath();
                cxt.arc(100, 200, 33, 0, 2 * Math.PI, true);
                cxt.strokeStyle = '#fff';
                cxt.stroke();
                cxt.clip();
                var img_head = new Image();
                img_head.crossOrigin = 'anonymous';
                var avatar_height = data_base.avatar_height, avatar_width = data_base.avatar_width;
                img_head.src = data_base.avatar;
                img_head.onload = function () {
                    cxt.drawImage(img_head, 0, 0, avatar_height, avatar_width, 54, 520, 80, 80);
                    cxt.restore();
                    var img_code = new Image();
                    img_code.crossOrigin = 'anonymous';
                    cxt.lineWidth = "4";
                    cxt.strokeStyle = '#FFF';
                    cxt.rect(80, 80, 400, 400);
                    cxt.stroke();
                    setTimeout(function () {
                        img_code.src = $("#qrcode").find("img").attr("src");
                        img_code.onload = function () {
                            cxt.drawImage(img_code, 0, 0, 100, 100, 450, 450, 80, 80);
                            cxt.font = '21px 黑体';
                            cxt.fillStyle = "#000";
                            cxt.fillText(personName, 250, 520);
                            imgUrl = c.toDataURL("image/png", 1);
                            $(".poster_img").attr("src", imgUrl);
                            $(".poster_container").show();
                        };
                    }, 0);
                };
            };
        } else {
            $.toast(res.m, "text");
        }
    }
});
</script>

API рисования, используемый апплетом WeChat

CanvasContext``canvasконтекст рисования компонента

CanvasContextстарая версия интерфейса, новая версияCanvas 2Dинтерфейс сWebПоследовательный.

  • string|CanvasGradient fillStyle- Цвет заливки
  • string|CanvasGradient strokeStyle- цвет границы
  • number shadowOffsetX- горизонтальное смещение тени относительно формы
  • number shadowOffsetY- вертикальное смещение тени относительно фигуры
  • number shadowColor- цвет тени
  • number shadowBlur- Уровень размытия теней
  • number lineWidth- Ширина линии
  • string lineCap- Стиль конечной точки линии
  • string lineJoin- Стили пересечения линий

lineJoin

стоимость иллюстрировать
bevel скос
round закругленные углы
miter острые углы
  • number miterLimit- Максимальная длина скоса
  • number lineDashOffset- Смещение пунктирной линии, начальное значение равно 0

Несколько связанных API рисованиякликните сюда

<view class="photoCan">
  <canvas style="width: 375px; height: 612px; position:fixed; top:9999px; left:0; z-index:223;" canvas-id="mycanvas"></canvas>
  <image src="{{imagePath}}" mode="widthFix"></image>
</view>

const app = getApp()
const setText = (context, fs, color, x, y, c) => {
  context.setFontSize(fs);
  context.setFillStyle(color);
  context.setTextAlign('left');
  context.fillText(c, x, y);
  context.restore();
};

Page({
  data: {
    imagePath:''
  },
  onLoad(){
    var that=this;
    wx.downloadFile({
       url: 'https://xxxx.com/image',
       success: function (res) {
           that.setData({
              path: res.tempFilePath
           })
        }
     })
    var ctx = wx.createCanvasContext('mycanvas');
    var c_avatar = '../image/timg2.jpg';
    var wechat = '../image/wechat.png';
    var path = that.data.path;
    ctx.fillStyle = "#ffe200";
    ctx.fillRect(0, 0, 375, 612);
    setText(ctx, 16, '#xxx', 90, 45, '达达);
    // 绘制画报背景图
    ctx.drawImage(path, 30, 95, 400, 500);
    //头像
    ctx.arc(45, 45, 25, 0, 2 * Math.PI)
    ctx.strokeStyle = "#fff";
    ctx.clip();
    ctx.drawImage(c_avatar, 20, 20, 50, 50);
    // 绘制生成画报
    ctx.draw(true, setTimeout(function () {
      // 保存
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          console.log(res)
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath
          });
        },
        fail: function (res) {
          console.log(res);
        }
      })
    }, 1000));
  }
})

Обратите внимание, не потеряйтесь

Ну все,выше все содержание этой статьи.Люди которые здесь видят таланты. Я буду продолжать обновлять статьи, связанные с сетевыми технологиями, в будущем.Если вы считаете, что статья полезна для вас, пожалуйста, поставьте лайк и поделитесь, спасибо! !

Друзья, которым понравилась эта статья, можете долго нажимать на картинку, чтобы следить за интерфейсом общедоступного номера Dada и смотреть более захватывающий контент.

Категории