update.はじめに生のCanvasAPIには便利なアニメーションメソッドは無く、ただの直線でも動かそうとすると結構手間です。意外と使う気もするので、記事としてパターンをまとめてみました。何かのお役に立てば幸いです。CanvasAPIのアニメーションについての基本イメージは以下にまとめています。グラフっぽいものを描く終わりにおまけだ...っ!縦線・横線を引く普通に引くメソッドが用意されており難しいことはありません。気をつけるポイントがあるとすれば「1pxの線を引くと太く見えることがある」ということぐらいでしょうか。ctx.stroke();};drawHorizontalLine();drawVerticalLine();アニメーションさせる直線として引く座標位置をそのつど算出して描画を繰り返します。する値」などを変更します。イージングを付けるイージングをつけてアニメーションに動きをつけてみます。今までのように伸ばす値を決めて加算していくのではなく、アニメーションさせるトータルの時間と経過時間を元に現在の変化量を計算していきます。イージングの計算式は以下のものを利用させていただきました。グラフっぽいものを描く直線の数を増やしてグラフのようなものを描いてみます。考え方は上で書いたものと同じですが、ここではConstructorを使ってカスタマイズしやすくなることを目指しました。graphObj[j].render();}斜め線を引く普通に引く縦横と同じです。y座標の両方を変動させます。斜辺の線上から位置がずれると直線にならないので、進むべき角度とそれに沿った値の計算が必要です。イージングを付けるイージングを付けてみます。変化中の値を計算する必要がなく、単純なものであればこちらの方が簡単かもしれません。グラフっぽいものを描く斜め線でグラフのようなものを描いてみます。縦線グラフの時と考え方は同じですが、更にDeferredを使って順番にアニメーションできるようにしてみました。});})終わりに思いのほかボリュームが出てしまったので、今回は直線のみを取り上げました。作り方は自分で考えてみたので、書き方が微妙だったり非効率な可能性があります。良い方法があればご教授くださいませ。requestStockLike47@nekoneko-wanwanWebデザイン、フロントエンド開発を主にやっています。真面目なものから、変なものまで。色々な記事を投稿していければと思います。Follow株式会社ホットスタートアップ「ペライチ」を開発する会社です。upLoginユーザーは見つかりませんでした。