首頁 > web前端 > js教程 > canvas製作滑鼠拖曳繪製圖形

canvas製作滑鼠拖曳繪製圖形

一个新手
發布: 2017-10-17 09:58:27
原創
2659 人瀏覽過

使用canvas 實作了用滑鼠拖曳繪製各種圖形

其中包含矩形,圓形,箭頭,畫筆

使用方法


var paint = Ypaint(canvas)
登入後複製

繪製圓形:

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.line.lineWidth

畫筆的顏色paint.outerParams.line.color

demo實例截圖:

#後續有時間會加入的功能:撤銷、回撤、插入圖片、圖片在canvas內的拖曳等等有需求的可以提一提

在這裡因為程式碼比較長,只提供壓縮版本的程式碼,需要完整專案及demo的朋友可以去我的github上下載 


以上是canvas製作滑鼠拖曳繪製圖形的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板