Разработка технических инструментов для рыбалки (1) 60 строк кода для реализации favcion рыбалки

внешний интерфейс Canvas
Разработка технических инструментов для рыбалки (1) 60 строк кода для реализации favcion рыбалки

Меня как старшего архитектора Мою уже не устраивает оплачиваемый сквоттинг.Вчера днём мне было нечего делать.Написал такой больной инструмент.Эффект как на рисунке.Эпизод Яркого меча

На самом деле, идея тоже очень проста, используйте js для динамической загрузки тега видео, поместите видео, а затем используйте холст, чтобы регулярно делать снимок видео и помещать его в тег ссылки.Опыт блогаВы также можете перетащить его на панель избранного

Код видео на станции B, если вы заинтересованы, двигайтесь дальшевоооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо по

1. Динамически загружать js

<button id="btn">测试</button>
<script>

document.getElementById('btn').addEventListener('click',()=>{
    var script =document.createElement('script')
    script.type='text/javascript'
    script.src='./moyu.js'
    document.body.appendChild(script)
}, false)

</script>

moyu.js

alert(2)

Нажмите кнопку, чтобы увидеть всплывающее окно

2. js загрузить видео

Та же логика, как и в нашем видео ji.mp4

// moyu.js
class Moyu{
	constructor(width,name){
		this.width = width
		this.name = name
	}
	initVideo(){
		let video = document.createElement('video')
		video.width=this.width
		video.controls="controls"
		video.src="./video/"+this.name+".mp4"
		document.body.appendChild(video)
		this.video = video
	}
	init(){
		this.initVideo()
	}
}

const m = new Moyu('200','ji')
m.init()

###3. Скриншот видео на холсте

Canvas может напрямую рисовать видео, отслеживать видеособытия и регулярно рисовать Давайте сначала поместим его в img и нарисуем favcion размером 32 * 32px.

инициализировать холст

  initCanvas(){
    this.canvas = document.createElement('canvas')
    this.canvas.width = this.canvas.height = 32
  }

Слушайте видео событий

	bindVideoEvents(){
		this.video.addEventListener('timeupdate',()=>{
			this.videoToImage()
		},false)
	}

видео рисунок

	videoToImage(){
		const context = this.canvas.getContext('2d')
		context.clearRect(0, 0, this.SIDE, this.SIDE)
		context.drawImage(this.video, 0, 0, this.SIDE, this.SIDE)
		const url = this.canvas.toDataURL('image/png')
		document.getElementById('img').src= url
	}

чрезмерный эффект

4. Установите значок

Это еще проще, ищите иконку в теге ссылки rel и ставьте href, если нет, добавьте ссылку

  setFavico(){
    const url = this.canvas.toDataURL('image/png')
    let icons = [...document.querySelectorAll('head>link')]
                  .filter(link=>{
                    const rel = link.getAttribute('rel') || ''
                    return rel.indexOf('icon')>-1
                  })
    if(icons.length){
      icons.forEach(icon=>icon.setAttribute('href', url))
    }else{
        const icon = document.createElement('link')
        icon.setAttribute('rel', 'icon')
        icon.setAttribute('href', url)
        document.querySelector('head').appendChild(icon)
    }
  }

5. Последующие действия

Полный код, менее 60 строк

class Moyu{
	constructor(width,name){
		this.width = width
		this.name = name
		this.SIDE = 32 // favcion边长32px
	}
	initCanvas(){
		this.canvas = document.createElement('canvas')
		this.canvas.width = this.canvas.height = this.SIDE
	  }
	initVideo(){
		let video = document.createElement('video')
		video.width=this.width
		video.controls="controls"
		video.src="./video/"+this.name+".mp4"
		video.crossOrigin = "anonymous"
		video.autoplay = "autoplay"
		document.body.appendChild(video)

		this.video = video
		this.bindVideoEvents()
	}
	bindVideoEvents(){
		this.video.addEventListener('timeupdate',()=>{
			this.videoToImage()
		},false)
	}
	videoToImage(){
		const context = this.canvas.getContext('2d')
		context.clearRect(0, 0, this.SIDE, this.SIDE)
		context.drawImage(this.video, 0, 0, this.SIDE, this.SIDE)
		this.setFavico()
	}
	setFavico(){
		const url = this.canvas.toDataURL('image/png')
		let icons = [...document.querySelector('head').querySelectorAll('link')]
					  .filter(link=>{
						const rel = link.getAttribute('rel') || ''
						return rel.indexOf('icon')>-1
					  })
		if(icons.length){
		  icons.forEach(icon=>icon.setAttribute('href', url))
		}else{
			const icon = document.createElement('link')
			icon.setAttribute('rel', 'icon')
			icon.setAttribute('href', url)
			document.querySelector('head').appendChild(icon)
		}
	}
	init(){
		this.initCanvas()
		this.initVideo()
	}
}

const m = new Moyu('200','ji')
m.init()

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

  1. Игра в веб-игры не влияет на внешний вид
  2. Борьба с арендодателем в командной строке
  3. играть в игры в vscode
  4. Этот favcion выкладывает видео, а в следующей версии обновят прогресс-бар и панель управления.Он вроде умеет делать прямую трансляцию, а 32px вроде умеет делать игру в тетрис

Процесс написания кода я записал на видео поставил Б станцию ​​и так вы просмотрели обновление вышло

Некоторые веб-сайты ограничивают адрес статических ресурсов, таких как Nuggets Zhihu, вы можете использовать станцию ​​​​B или тест Baidu.

Создайте группу, ловите рыбу вместе, добавьте меня в WeChat, если вы не можете войтиwoniu_ppp

image-20200402232718316

Категории