Canvasで超簡単に点線・破線を引く方法!JavaScript

 この記事は約1分で読めます。
jsファイルかvue呼び出す
HTML5
こんにちは、
今回はCanvasで点線、破線を簡単に引く方法を
ご紹介致します。

なんとリファレンスをみる限り
Canvasは点線や破線は引けないみたいですね。

Canvasの点線や破線を引こうと検索しましたが、
ライブラリや長々とコードを書かなくてはならない方法が多かったので
シンプルに点線・破線を引きました。

Canvasで点線・破線を引く方法!

 
canvasで点線を引く  
完成は上の画像です。
スポンサーリンク


方法だけ書きますと、

Canvasに線を引くlineToは使用せず、
stokeStyleもしくはarcを使用。
そして引きたい座標に
反復して描画します。

サンプルコード

 

 
参考:Canvasで色々な直線を引いてみよう!【おまけつきだ・・・っ!】

 

       
   
コメントはまだありません

コメントを残す

JavaScript
classとidの取得する値が違ってエラーと対処法。JavaScript

JavaScriptである処理をしようとしていたのですが、 idでは出来てclassやNameではエ …

JavaScript
Javascript、配列からランダムに取り出し重複させない書き方『超強引かつ分かり易い』

 皆さんこんにちは!はせです。JavaScriptを今開発で使っているのですが、配列からラ …

HTML5
Webフォント、Canvasに描写できない。超絶強引だけど描写する方法。

皆さんこんにちは、はせです。今回は、『超強引』にWebフォントがCanvasに描写されない対処法を書 …