ホームページ > 記事 > ウェブフロントエンド > 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.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 サイトの他の関連記事を参照してください。