新しく追加された Html5 のキャンバスは、誰もが毎日使用していると思われますが、画像を合成するために使用されることもありますが、コードが非常に重くなります。面倒なため、よく使用されるキャンバス描画、テキスト描画、保存機能がカプセル化されており、簡単な設定だけでキャンバス描画タスクを迅速に完了し、要件の変更に冷静に対応できます。
li-canvas.jsHtml5 の Canvas 関数は、単一の画像、複数の画像の描画、角丸の画像の描画、複数行のテキストの描画、自動行折り返し、画像の保存とダウンロードなどの機能を容易にするためにカプセル化されています。
Github アドレス: github.com/501351981/l…
主な機能•画像描画:単一画像/複数画像描画、角丸画像描画。 •テキスト描画:複数段落テキスト描画、自動行折り返し。 •画像保存:画像データの取得、画像のローカルへのダウンロード、カスタムダウンロード画像名のサポート。 。
npmインストール# npm install npm install --save li-canvas直接見積もり
js ファイルを html に直接インポートします。
<script src=dist/li-canvas.js></script>使用方法インスタンス化する
li-canvas を使用する場合、最初にオブジェクトをインスタンス化する必要がありますnew LiCanvas(canvas_id,options),キャンバスの ID を渡します。オプションはオプションで、キャンバスの背景やデフォルトのテキスト スタイルなどを設定できます。
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var Canvas= new LiCanvas('test') </script></body> ...絵を描く•一枚の絵を描く
addDrawImageTask(image) を呼び出します。パラメータ image は、以下を含むオブジェクトです。
src: 画像のURLアドレス
x: キャンバス上の画像の左上隅の x 座標
y: キャンバス上の画像の左上隅の y 座標
width: 絵の描画幅
高さ: 絵の描画の高さ
borderRadius: 画像の角の半径
addDrawImageTask(image) を呼び出した場合、画像はすぐには描画されませんが、描画タスクはdraw(callback) が呼び出されたときにのみ実行され、実行が完了するとコールバック関数が呼び出されます。
なぜこれを行うのでしょうか?描画時に最初に画像をダウンロードする必要があるため、これは非同期操作であるため、最初にタスク リストに追加され、draw() が呼び出されると、タスクが追加された順序で実行されます。
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px 赤一色></canvas><img src=./bg.jpg id=img width=0 height=0><script> var bg={ src:document.getElementById('img').src,//または画像のURLアドレス x:0,// 左上隅のx座標 y:0,// 左上隅のy座標Corner width:1563,/ /絵の描画幅 height:1180,//絵の描画高さ borderRadius:0 //絵の角の半径} var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(bg) //描画タスクを追加しますが、描画はすぐには実行されません Canvas.draw(()=>{ console.log(drawing completed) }) </script></body> ...•複数のグラフを描く
addDrawImageTask(image) を連続して複数回呼び出すことも、画像の配列を渡すこともできます。
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px 赤一色></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, 幅:1563, 高さ:1180, borderRadius:0 } var img2={ src:http://*****.com/***.png, x:0, y:0, width: 1563、高さ:1180、境界半径:0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0,幅:100, 高さ:100, borderRadius:0 }, { src:http://*****.com/***.png, x:0, y:0, 幅:100, 高さ:100, borderRadius:0 } ] var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(img1) Canvas.addDrawImageTask(img2) //複数の画像描画を実現するための複数の呼び出し Canvas.addDrawImageTask(imgs) //複数の画像の描画は、配列を直接渡すことによっても実現できます Canvas.draw(()=>{ console.log(drawing completed) }) </script> </body> ...•丸いまたは円形の絵を描く
borderRadiusを設定するだけです
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px 赤一色></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, width:100, height:100, borderRadius:50 //フィレット半径を設定します。フィレット半径が正方形の辺の長さの半分の場合、円になります。 var Canvas=new LiCanvas('test') Canvas .addDrawImageTask(img1) Canvas.draw(()=>{ console.log(描画完了) }) </script></body> ...テキストを描画する•テキストを描く
addDrawTextTask(text,style)呼び出す
text: 描画するテキスト
style: テキストスタイル (x を含む): テキスト描画の開始位置の左上隅の座標 x
y: 文字描画の実際の位置の左上隅の座標y
幅: テキストの 1 行の幅を超える場合は、自動的に折り返されます。
fontSize: テキスト サイズ、整数、単位は px
fontWeight: テキストの太さ、太字、太字など、または 400、500、600... CSS font-weight と同じ
fontFamily: テキストフォント、CSS と同じ
lineHeight: 行の高さ、整数、単位ピクセル
色: 色
marginBottom: テキストの段落が複数ある場合、段落間の距離も指定できます
テキストの描画も非同期です。draw(callback) が呼び出されるまで実際には描画されません。
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px ソリッドレッド></canvas><script> var Canvas=new LiCanvas('test') Canvas.addDrawTextTask(描画するテキスト, { x:110、y:496、幅:1340、fontSize:54、fontWeight:'bolder'、fontFamily:PingFangSC- Regular、'Microsoft YaHei'、SimSun、Arial、'Helvetica Neue'、サンセリフ、lineHeight:70、カラー:'#1a1a1a'、マージン下:40 }) Canvas.draw(()=>{ console.log(描画完了) }) </script></body> ...•複数段落のテキストを描画する
方法 1: 上記と同様に、addDrawTextTask(text, style) を繰り返し呼び出します。
方法 2: テキストを配列で渡し、スタイルを共有できる
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px ソリッドレッド></canvas><script> var Canvas=new LiCanvas('test') Canvas.addDrawTextTask([描画するテキスト段落 1, 描画するテキスト段落 2],{ x:110, y:496, width:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC- Regular,' Microsoft YaHei'、SimSun、Arial、'Helvetica Neue'、サンセリフ、lineHeight:70、 color:'#1a1a1a', marginBottom:40 }) Canvas.draw(()=>{ console.log(描画完了) }) </script></body> ...一部の共有スタイルを繰り返し設定することを避けるために、オブジェクトがインスタンス化されるときにスタイルにデフォルト値を渡すこともできます。
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px ソリッドレッド></canvas><script> var Canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC- Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) Canvas.addDrawTextTask (描画されるテキスト段落) 1,{ x:110, y:496, 幅:1340, }) Canvas.addDrawTextTask(描画するテキスト段落 2,{ x:110, y:696, width:1340, }) Canvas.draw(()=>{ console.log(描画完了) }) </script></本体> ...複数の段落に異なるスタイルを設定する必要があるテキストの段落がある場合、次のようにスタイルを個別に指定することもできます。非常に柔軟です~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px ソリッドレッド></canvas><script> var Canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC- Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) Canvas.addDrawTextTask([{ text:To)描画された段落テキスト 1、フォントサイズ: 60 }, 描画するテキスト段落 2, 描画するテキスト段落 3],{ x:110, y:496, width:1340, }) Canvas.draw(()=>{ console.log(描画完了) }) </script></body> ...ダウンロード画像の保存
•写真をダウンロードする
PNG画像としてダウンロード：saveToPng(ファイル名)
JPEG画像としてダウンロード：saveToJpeg(ファイル名)
gif画像としてダウンロード：saveToGif（ファイル名）
注: 画像のダウンロードを有効にするには、draw() のコールバック関数で呼び出す必要があります。
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px 赤一色></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, width:1563, height:1180, borderRadius:0 } var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(bg) Canvas.draw(()=>{ Canvas.saveToPng(li-canvas) }) </script ></body> ...・画像データの取得
たとえば、WeChat ブラウザでは、実際には画像を長押しして保存したい場合があります。このとき、キャンバスで合成された画像データが挿入されます。 imgのソース。
getImageData()を呼び出して合成画像データを取得します
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px 赤一色></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, width:1563, height:1180, borderRadius:0 } var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(bg) キャンバス。 draw(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...Github アドレス: github.com/501351981/l…
要約する以上、エディターがli-canvasを使ってHTML5でシングルピクチャー、マルチピクチャー、角丸絵の描画、シングルラインテキスト、マルチラインテキストなどを簡単に実現する方法を紹介しましたので、参考になれば幸いです。ご質問がございましたら、メッセージを残してください。すぐに返信させていただきます。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！