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

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

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

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

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

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


方法だけ書きますと、

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

サンプルコード

 

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

 

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

コメントを残す

JavaScript
html2canvasでfont-sizeが変わらないときの対処法!

こんにちは、はせです。 html2canvasとは簡単に 要素を画像に変換してくれるJSライブラリで …

JavaScript
jQueryで「自身の要素」のみイベントを起こす方法。親子の要素にも影響しない。

こんにちは、長谷川です。 今回は、要素に対してクリックなどのイベントを 親要素や子要素を無視し、その …

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

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