Javascript | 極めて冴えない普通人の気まぐれブログ

Javascriptでライブラリを使わずに円グラフを描画する

こんばんは。きわさです。 javascriptで円グラフを描画したいときはChart.jsなどを使用するかと思いますが、今回はライブラリなしで描画したいと思います。まずはcanvas要素を用意します。次にjavasc …

こんばんは。きわさです。 Webサイトでキーであったり何らかの結果の表示とともに「コピー」ボタンが用意されていることがあります。ボタンを押すとそのテキストがクリップボードにコピーされるというものです。 javascri …

こんばんは。きわさです。 HTMLにはcanvasというタグがあります。 canvasには、描画しているデータをDataURLに変換するメソッドがあるのでこれを使いたいと思います。流れとしては、画像を読み込み、can …

こんばんは。きわさです。今回はhtmlでsvg画像を表示する方法です。 SVG svgは、Scalable Vector Graphics (スケーラブルベクターグラフィックス)というそうです。ベクタ形式の画像で …

こんばんは。きわさです。 javascriptで配列を扱う際に知っておきたいメソッドです。 map 配列から新たな配列を作成します。 map は渡した関数を配列の各要素に対して実行し、その戻り値の配列を返します。渡した …

こんばんは。きわさです。またまたcanvas関連です。今回は画像を回転させてみます。 context.rotate(5 * Math.PI / 180) で指定した分だけ回転させます。ただ、画像を回転させるわけでは …

こんばんは。きわさです。前回、canvas上の画像を透過させる方法について書きました。今回は、そのcanvas上の画像をPNGに変換する方法です。これで通常の画像を透過PNGに変換することもできるようになります。 …

こんばんは。きわさです。今回は、Javascriptで画像の指定した色を透過させる方法です。この関数 test で何をしているかと言うと、まず引数のr, g, bはRGBによる色指定で、例えば黄色の場合はr=255 …

こんばんは。きわさです。前回の記事で Alert や Confirm でダイアログを表示する方法を書きましたが、今回はそれらを使わずに自前でダイアログを用意する方法についてです。まずはHTMLです。 HTMLでダイア …

こんばんは。きわさです。今回はJavascriptでダイアログを表示する方法です。ダイアログにもいくつか種類があります。 Alert、Confirm、Promptです。それぞれ見ていきましょう。 Alert まずは …