Интересный холст, вы это заслужили!

Canvas — это тег, предоставляемый HTML5 для отображения эффектов рисования. Изначально Canvas означает холст, который используется для отображения эффектов рисования на HTML-страницах. Самым ранним Canvas было решение, предложенное Apple, и сегодня оно реализовано в большинстве браузеров.

Сферы использования холста

игра
данные визуализации больших данных
рекламный баннер
мультимедиа
Моделирование
Дистанционное управление
графическое редактирование

Определите, поддерживает ли браузер тег canvas

var canvas = document.getElementById('canvas')
if (canvas.getContext) {
  console.log('你的浏览器支持Canvas!')
} else {
  console.log('你的浏览器不支持Canvas!')
}

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

1. Используя тег canvas, вы можете открыть область сетки на странице, вы можете установить ее ширину и высоту, а также ширину и высоту 300 и 150.

<canvas></canvas>

2. Получите холст элемента dom

Холст сам по себе не может рисовать. Он использует JavaScript для завершения рисования. Объект холста предоставляет различные API для рисования.

var cas = document.querySelector('canvas')

3. Получить объект контекста (объект холста!) через cas

var ctx = cas.getContext('2d')

4. Начать рисовать через ctx (задать начальную точку, задать конечную точку, соединить линию-штрих)

ctx.moveTo(10, 10)
ctx.lineTo(100, 100)
ctx.stroke()

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

Установить начальную позицию:context.moveTo( x, y )
Установить конечное положение:context.lineTo( x, y )
Штриховой рисунок:context.stroke()
Заполнить розыгрыш:context.fill()
закрытый путь:context.closePath()

Canvas также может устанавливать связанные свойства линий, например:

CanvasRenderingContext2D.lineWidthУстановите ширину линии.
CanvasRenderingContext2D.strokeStyleУстановите цвет линии.
CanvasRenderingContext2D.lineCapУстановите тип конца линии, «стык» (по умолчанию), «круглый», «квадрат».
CanvasRenderingContext2D.lineJoinустановить точку перегиба пересекающейся линии, 'митра' (по умолчанию), 'круглая', 'скос',
CanvasRenderingContext2D.getLineDash()Получите массив стилей сегмента линии.
CanvasRenderingContext2D.setLineDash()Задайте стиль сегмента линии.
CanvasRenderingContext2D.lineDashOffsetСмещение сегмента линии.

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

function myRect(ctxTmp, x, y, w, h) {
  ctxTmp.moveTo(x, y)
  ctxTmp.lineTo(x + w, y)
  ctxTmp.lineTo(x + w, y + h)
  ctxTmp.lineTo(x, y + h)
  ctxTmp.lineTo(x, y)
  ctxTmp.stroke()
}

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')
myRect(ctx, 50, 50, 200, 200)

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

fillRect( x , y , width , height)Заполните прямоугольник (x, y) в качестве начальной точки, ширины и высоты соответственно, по умолчанию черный
stokeRect( x , y , width , height)Нарисуйте полый прямоугольник с (x, y) в качестве начальной точки, шириной и высотой соответственно.
clearRect( x, y , width , height )Очистите прямоугольник с (x, y) в качестве начальной точки, шириной и высотой соответственно, как прозрачный

нарисовать дугу

Есть способы нарисовать дугу

CanvasRenderingContext2D.arc()
CanvasRenderingContext2D.arcTo()

6 параметров: x, y (координаты центра окружности), радиус, начальный радиан (не градус угла), конечный радиан, (bool задает направление!)

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')

ctx.arc(100, 100, 100, 0, degToArc(360))
ctx.stroke()

// 角度转弧度
function degToArc(num) {
  return (Math.PI / 180) * num
}

сектор розыгрыша

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')

ctx.arc(300, 300, 200, degToArc(125), degToArc(300))

// 自动连回原点
ctx.closePath()
ctx.stroke()

function degToArc(num) {
  return (Math.PI / 180) * num
}

делать кисти

объявить переменную как идентификатор
Когда мышь нажата, запишите начальную позицию
Когда мышь движется, начните рисовать и соединять
Когда мышь поднята, выключите переключатель

Нажмите, чтобы просмотреть визуализацию

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')

var isDraw = false
// 鼠标按下事件
cas.addEventListener('mousedown', function () {
  isDraw = true
  ctx.beginPath()
})

// 鼠标移动事件
cas.addEventListener('mousemove', function (e) {
  if (!isDraw) {
    // 没有按下
    return
  }
  // 获取相对于容器内的坐标
  var x = e.offsetX
  var y = e.offsetY
  ctx.lineTo(x, y)
  ctx.stroke()
})

cas.addEventListener('mouseup', function () {
  // 关闭开关了!
  isDraw = false
})

Ручное втирание

Принцип аналогичен холсту, за исключением того, что используется метод clearRect().

Нажмите, чтобы просмотреть визуализацию

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')

ctx.fillRect(0, 0, 600, 600)

// 开关
var isClear = false

cas.addEventListener('mousedown', function () {
  isClear = true
})

cas.addEventListener('mousemove', function (e) {
  if (!isClear) {
    return
  }
  var x = e.offsetX
  var y = e.offsetY
  var w = 20
  var h = 20
  ctx.clearRect(x, y, w, h)
})

cas.addEventListener('mouseup', function () {
  isClear = false
})

Царапать

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

Нажмите, чтобы просмотреть визуализацию

<div>
  <img src="./images/2.jpg" alt="" />
  <canvas width="600" height="600"></canvas>
</div>

css

img {
  width: 600px;
  height: 600px;
  position: absolute;
  top: 10%;
  left: 30%;
}

canvas {
  width: 600px;
  height: 600px;
  position: absolute;
  top: 10%;
  left: 30%;
  border: 1px solid #000;
}

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')
var img = document.querySelector('img')
// 加一个遮罩层
ctx.fillStyle = '#ccc'
ctx.fillRect(0, 0, cas.width, cas.height)
setImgUrl()
// 开关
var isClear = false
cas.addEventListener('mousedown', function () {
  isClear = true
})
cas.addEventListener('mousemove', function (e) {
  if (!isClear) {
    return
  }
  var x = e.offsetX
  var y = e.offsetY
  ctx.clearRect(x, y, 30, 30)
})
cas.addEventListener('mouseup', function () {
  isClear = false
})

function setImgUrl() {
  var arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']
  // 0-3
  var random = Math.round(Math.random() * 3)
  img.src = arr[random]
}

Для получения дополнительных демонстраций, пожалуйста, проверьтеGitHub.com/Майкл-Ли Чжиган…

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

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

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

нарисовать дугу

делать кисти

Ручное втирание

Царапать

рекомендуемая статья