雑多なブログ

音楽や語学、プログラム関連の話題について書いています

js

Promise.all()

js

Promiseを使って非同期処理を行う場合、 Promise.all()を使うと並列で処理を実行できるようなので、活用してみたいと思う。 サンプルコード promise.js const loadImage = (url, elem) => { return new Promise((resolve, reject) => { const request = new …

html5のcanvasでMatrixっぽいやつ

js

この記事読んで、canvasでマトリックスぽいやつが作れるという事で早速作ってみました。かなり古いですがw gigazine.net サンプルをみてみると、一部の漢字のみ表示している感じでした。 どうせなら一通りの文字を出力してみたいと思いましたが、実際にやっ…

Canvasの画像のピクセルデータの書き込み

Canvasでピクセルデータを取り扱う場合は、ImageDataオブジェクトを使用していろいろな操作を行います。 Canvasのピクセルデータは次の通り 1ピクセルは、width x height x 4byte のデータがあります。 4byteは何の情報かというと、下記の色の情報を持ってい…

ローカル環境でCanvasで画像読み込んだら、クロスドメインなんちゃらで警告が出た。

Webサーバも立てずに、file:///〜で直にhtmlファイルをブラウザ で表示してCanvasの処理を書いていたら、クロスドメインなんちゃらとエラーが出た。謎だ。 [code] hoge.html:17 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderin…

Canvasの練習で時計を作ってみた。

めちゃくちゃしょぼいけど、とりあえずCanvasの練習で時計らしきものを作ってみた。 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>時計</title> <script> var ctx; function init() { ctx = document.getElementById("graph").getContext('2d'); paint(); set…</meta></meta></head></html>