Tag: html

【Canvas】mousemoveのタイミングで円を描くときに円が離れてしまう問題

こんにちはー。 前回、arc を使って描いた時、円が散らばらないようにする方法を紹介すると書いたので書きます。 まず、下の例を見てください。 うまくいかない例See the Pen Canvas Mousemove 円で描いてうまくいかない例 by shundroid (@shundroid) on CodePen. よくありがちなコンテンツです。mousemove のイベントが発生した時に円を描いているわけですが、めっちゃ速く動かして書くと、円と円の間が空いてしまいます。 今回は意外と初歩的なことかもしれませんが、この、間が空かないようにする方法を描きます。 moveToとlineToを … Read More

【JS】Canvasで丸や四角で「消す」方法

こんにちはー。題名のとおり、Canvas の「消す」機能で、丸などに形を変える方法を紹介します。 「消す」機能についてまずはじめに、消す方法としてのルールを書いておきます。 白く塗る はダメ!(背景が白でない場合があるため) 消した部分は透明になるようにする。 実装のポイントcontext の globalCompositeOperation を、destination-out に変更すると、fill や stroke で指定した領域を 切り取る ことができます。 また、このプロパティは、その他いろいろな値に変更できます。 サンプル:円形で消すglobalCompositeOperatio … Read More

【Rx.js】画像を非同期に読み込むサンプルコード

こんにちはー。 非同期の処理をいい感じに使える js のライブラリないかなーと探していたら、Rx.js というのを見つけたので、それを使ったサンプル?を紹介します。 Rx.js とは?.NET 向けの Reactive Extensions を js 用に移植したもの。ぼくは、最初 .NET の方を使っていて、「それの js 版があったらいいな~」と思っていたらピンポイントであったという感じですー。 コードの概要では、今回書いてみるコードの概要を紹介します。 3つの画像が配列になっている それらを非同期で読むが、1つ読み終わったら次を読むという条件。 1つ読み終わった後と全部読み終わった後に … Read More

【WordPress】MarkdownでSyntaxHighlighter Evolvedを使うとき、「<」などと変換されてしまう

まさにドンピシャでした!ありがとうございます!! このようになっているコード。 `() => {` の、`>`の部分が見事に`>`になってしまうんです。 そんなときは、次のように書きましょう。 ポイントは、‘‘‘と書いていたところを、divタグとショートコードで書くところです。 これで解決!budougumiさんありがとうございます。 … Read More