HTML5のCanvasとJSで電光掲示板

yossy222

License: MIT License

Fork
7
Fav
10
View
21928
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 229 lines
  • HTML 16 lines
  • CSS 25 lines
駅のホームで見かける電光掲示板ぽいものをCanvas使って表現してみたヨ。
テキストボックスに文字を入れてdrawボタンを押すと、電光掲示板に表示されるヨ。
※最初の描画がちょっと遅いかもしれません。。

【処理の概要】
 1.Canvasに灰色のテキストを描画
 2.3pxのブロックでピクセレート処理(モザイク化)
 3.灰色だと暗いので、適当な閾値を超えたRGB値のピクセルを明るくする
 4.オレンジ色をつける
 5.格子状の罫線を引いてドットっぽく見せる
 6.スクロールさせる

【画面に表示しているもの】
 1段目:上記「1」までの処理をしたもの
 2段目:上記「4」までの処理をしたもの
 3段目:上記「5」までの処理をしたもの
 4段目:上記「6」までの処理をしたもの

----------------------------------------------------------------
解説のブログ記事はこちら。
http://www.s-arcana.co.jp/tech/2012/03/electric-scoreborad-on-html5-canvas-with-javascript.html
----------------------------------------------------------------
  • HTML5のCanvasとJSで電光掲示板
  • jQuery v1.7.1
  • HTML5のCanvasとJSで電光掲示板

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

kskren0119kskren0119:

HTML5のCanvasとJSで電光掲示板

shoqshoq:

電光掲示板

Forked

sort by