キャンバスの内容を消去する（点消去＋線消去）

キャンバスの内容を消去

1. 幅または高さをリセットする

キャンバスのコンテンツは、高さや幅をリセットするたびにクリアされるため、以下の方法でクリアすることができます（この方法は、コンテンツ全体をクリアする必要がある場合に限られます）。

f1=open("fenci_result.txt",'r')

2. clearRect

UnicodeDecodeError: 'utf-8' codec can't decode byte 0xe9 in position 2892: invalid continuation byte

画像

3. GlobalCompositeOperation

参照globalCompositeOperation（）関数、この関数は、キャンバス上の色を組み合わせるために使用され、我々はこの原則を使用することができます、重ね合わせ（数学 "または "原理）ゴムを生成する。

まず、globalCompositeOperationプロパティにどのような値が設定でき、それぞれの効果はどのようなものかを見てみましょう。

import codecs
f1=codecs.open("fenci_result.txt",'r',encoding = "ISO-8859-1")

画像

destination-outに設定すると、キャンバスの既存のピクセルポイントの画像をクリアできることがわかります。

キャンバスに描かれた線の消去（点消去、線消去）

　　私の最新のプロジェクトでは、ブラシ機能があり、ブラシで描いた線は点消しと線消しの両方で、消しゴムで消すことができます。

　　しかし、線が複数回描かれ、その間に他の操作がある場合（例えば、描画内容を一度変更した後）、上記の方法では、消去のたびに描画とデータの保存を繰り返さなければならないので、簡単には目的を達成できない、単純に、キャンバス全体を base64 エンコードした画像に変換して、後で再び描くときに、この画像データを再びキャンバスに描き、このキャンバスに描画と消去を続ければ良いのです。しかし、線消去の機能がないのはいかがなものでしょうか！？

　　ここでは、線を描いた後の点消去と線消去を実現するために、描いたパスの点の座標を保存する別の方法を紹介します。

　　まず、線を格納するためのデータ構造を紹介すると、以前の記事で書いた jsはオブジェクトを格納するためのデータ構造hashTableとlistを実装している まず、ハッシュ構造の実装を概観することができますが、キーと値を高速に検索できる利点を明確にしておく必要があります》。キャンバスに描かれた様々な図形や線に加え、どの線上をどの要素がクリックされたかを知るにはどうすればよいのでしょうか。その ソフトウェアプロジェクトの技術ポイント(4)-canvasの要素でのクリックを実現するために 本ブログでは、その実装原理を解説しています。

1. 線の記憶と描画

私がプロジェクトに格納したラインハッシュ構造のオブジェクトは以下の通りです。

画像

1行目のキー値「#8c471a」に次のような具体的な情報を展開し、colorKey、lineColor、lineWidthを持つvalue、そして最も重要な、線のすべての点の座標集合を格納するList構造体のpointsオブジェクトを展開します。

次のコードは、キャンバスへの線の描画を実装したものです。2次ベッセル関数を使って、線が滑らかでシワがないようにし、点が1つしかないときは点を描きます。

The solution is found at stack overflow