Canvas ではマウスをドラッグしてグラフィックスを描画します

キャンバスを使用して、マウスのドラッグでさまざまなグラフィックを描画します

四角形、円、矢印、ブラシを含む

使用方法

var paint = Ypaint(canvas)

円を描く:

paint.chooseCircle()paint.chooseCircle()

圆形其他参数

圆形的粗细 paint.outerParams.circle.lineWidth
圆形的颜色 paint.outerParams.circle.color

绘制矩形：

paint.chooseRect()

矩形其他参数

矩形的粗细 paint.outerParams.rect.lineWidth
矩形的圆角 paint.outerParams.rect.radius
矩形的颜色 paint.outerParams.rect.color

绘制箭头：

paint.chooseArrow()

箭头其他参数

箭头的粗细 paint.outerParams.arrow.range
箭头的大小 paint.outerParams.arrow.color

画笔工具：

paint.chooseCircle()

円のその他のパラメータ

円の太さpaint.outerParams.circle.lineWidth

円の色paint.outerParams.circle.color

長方形を描画します:

paint.chooseRect()<p><img src="https://img.php.cn/upload/article/000/023/547/cd9919972587865ff2445ba43c907cd4-0.jpg" alt="">長方形のその他のパラメータ</p> <p>長方形の太さpaint.outerParams.rect.lineWidth</p>長方形の丸い角paint.outerParams.rect.radius<p>長方形の色paint.outerParams.rect. color<br></p>矢印を描画します: 🎜🎜 <code>paint.chooseArrow()🎜🎜矢印のその他のパラメータ🎜🎜 矢印の太さpaint.outerParams.arrow.range🎜 矢印ペイントのサイズ。 externalParams.arrow.color🎜🎜ブラシ ツール: 🎜🎜paint.chooseCircle()🎜🎜ブラシ ツールのその他のパラメーター🎜🎜ブラシの太さPaint.outerParams.line.lineWidth🎜の色ブラシのpaint.outerParams.line.color🎜🎜デモのスクリーンショット例: 🎜🎜🎜🎜🎜フォローアップ やがて追加される機能: 元に戻す、巻き戻し、画像の挿入、キャンバス内での画像のドラッグなど。コードが比較的長いため、デモを気に入った友人は、コードの圧縮バージョンのみが必要です 🎜🎜 からダウンロードできます。

以上がCanvas ではマウスをドラッグしてグラフィックスを描画しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。