用html5中canvas畫一條直線的方法是什么?這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
成都創(chuàng)新互聯(lián)從2013年成立,先為仁布等服務建站,仁布等地企業(yè),進行企業(yè)商務咨詢服務。為仁布企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。首先給大家介紹用canvas繪制直線需要用到的屬性
moveTo(x,y) 可以設置線條開始位置的坐標
lineTo(x,y) 可以設置線條結(jié)束位置的坐標
lineWidth可以設置線條的寬度
strokeStyle 可以設置線條的顏色
用canvas繪制直線,步驟詳解:
1、用<canvas>標簽在瀏覽器上定義一張畫布,并給其一個ID名,可以根據(jù)自己的需要設置畫布的大小、背景顏色等。
2、用var c=document.getElementById("myCanvas")獲取canvas元素
3、通過var ctx=c.getContext("2d")創(chuàng)建一個 context 對象
4、設置直線的起點和終點,開始位置moveTo(25,25) ,結(jié)束位置lineTo(175,175)
5、可以用ctx.lineWidth = 5設置線條的寬度,ctx.strokeStyle = "red"設置線條的顏色
6、最后用ctx.stroke()畫一條直線,就完成了
具體代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="200px" height="200px" style="border: 1px solid #000000;"></canvas> </body> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(25,25); ctx.lineTo(175,175); ctx.lineWidth = 5; ctx.strokeStyle = "red"; ctx.stroke(); </script> </html>
效果圖:
感謝各位的閱讀!看完上述內(nèi)容,你們對用html5中canvas畫一條直線的方法是什么大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。
文章名稱:用html5中canvas畫一條直線的方法是什么-創(chuàng)新互聯(lián)
本文路徑:http://muchs.cn/article32/cdeppc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供服務器托管、響應式網(wǎng)站、做網(wǎng)站、自適應網(wǎng)站、手機網(wǎng)站建設、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容