タグ

2015年12月16日のブックマーク (6件)

  • javascript Canvas で作られた3Dに回転する電光掲示板のようなデジタル時計 | 9ineBB

    3Dなデジタル時計 javascriptのCANVASで作られたデジタル時計。3Dに表現されており回転して表示がされる、またデジタル時計の部分をドラッグすると、時計が動く機能も付いている。そのままモニュメント的に利用できそうである CODE HTML <canvas id="canvas"></canvas> CSS html, body { -ms-touch-action:none; -ms-content-zooming:none; position:absolute; margin:0; padding:0; left:0; top:0; width:100%; height:100%; background:#000; } #canvas { position: absolute; left: 50%; top: 50%; width:600px; height:300px; m

    javascript Canvas で作られた3Dに回転する電光掲示板のようなデジタル時計 | 9ineBB
    takuya_1st
    takuya_1st 2015/12/16
    canvas 楽しくなってきた
  • HTML5のCanvasとJavaScriptで電光掲示板のアニメーションを表現する - スタジオ・アルカナ技術ブログ

    はいどうも~。 雪の日は電車遅延でテンションが下がりがちなエンジニアの吉田です。 あたくし、通勤時間が通常だとだいたい1時間45分なのですが、 電車遅延があると、だいたい2時間を越える程度の通勤時間となり、 会社に到着した時点で、既にぐったりしていたり、していなかったり。 そんな中、家から最寄駅に着いて最初にげんなりするキッカケとなる のが、駅にある電光掲示板で誇らしげにチラついていらっしゃる 「【横須賀線 遅延】」というオレンジ色の掲示だったりします。 特に、家から駅までダッシュしたあとにお目にかかれたときなんかは、 凄まじい威力を発揮して頂けますね。洗練された脱力感を体験できる。 今回は、この電光掲示板を見た時にテンションが下がる気分を是非 共有したいと思い、HTML5のCanvasを使って表現してみます。 表現してみた結果、こんな感じのものが出来上がりました。 ※Windows7 +

    takuya_1st
    takuya_1st 2015/12/16
    canvas マジ有能じゃん
  • MdN Design|総合情報サイト

    HTML5&CSS3 4-01 canvasを使ってJPEG画像を透過させる canvasを使って、JPEG画像を透過表示する方法を紹介する。通常、透過表示するにはPNG形式の画像を使用するが、これをJPEGに置き換えることで、ファイルサイズを抑えることが可能になる。 制作・文/佐藤とも子・サチコ(螺旋デザイン) BROWSER iOS…5over Android…1.6over IE…9over Firefox…3.5over Safari…3over Chrome…2over 01 それでは早速、JPEGの背景を透過させてみよう。 方法を一言で説明すれば、canvasを利用してJPEGとアルファ付のPNGを合成する【1-1】【1-2】、という手順となる。 透過PNGを使うと普通にimgで配置するだけでいいのだが、canvasを使用することで、ファイルサイズが圧倒的に軽くなるという利点が

    MdN Design|総合情報サイト
    takuya_1st
    takuya_1st 2015/12/16
    canvas 便利ですね
  • canvas要素 + Javascriptで作る、動的コンテンツ

    HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can

    canvas要素 + Javascriptで作る、動的コンテンツ
    takuya_1st
    takuya_1st 2015/12/16
    canvas すっげ
  • http://genege.net/

    http://genege.net/
    takuya_1st
    takuya_1st 2015/12/16
    そうか、JSのcavas ってこう使うのか
  • Mechanizeでソシャゲーにログインしよう - ひでたそ覚書帳

    ソシャゲーやってると、機能不足を感じるんですよ。 例えば、持ってるアイテムの一覧とか、レベルアップ可能な一覧とか。 そういう、支援が欲しいんですよ。 今回は、某ソシャゲーに、Mechanizeでログインするところまでやろうと思います。 cookieを使ってログイン んで、ログイン時の画像認証を回避するために、chromeCookieを使います。 takuya-1st.hatenablog.jp ただ、この記事にも記載がありますが、chromeCookieは暗号化されるようになりました。 cookieの復号 色々検索してたら、Win32APIのCryptUnprotectData()を使うことで、復号できるそうです。 ってことで、書いてみました。 require 'fiddle/import' require 'fiddle/types' module WinAPI module Win

    Mechanizeでソシャゲーにログインしよう - ひでたそ覚書帳
    takuya_1st
    takuya_1st 2015/12/16
    chrome cookie decrypt ruby in windows