1、1Zwibbler 這款工具提供了各種圖形的快捷方式，有點像Photoshop的工具面板你可以從工具欄上拖著想要的圖形形狀，然后在畫布上修改方的，圓的，點線等這款神奇的HTML5繪圖工具還能讓你給圖形配置陰影效果拷貝，粘貼；我已經(jīng)做過canvas方面的開發(fā)了，對html5這個新的api很了解，首先你不要在style里面設(shè)width跟height，可以告訴你最后跟你設(shè)的坐標(biāo)不一樣，這里面原因是canvas的原始設(shè)置是有固定高跟寬的，所以你光設(shè)置style的css值，會產(chǎn)生很；Canvas 元素是 HTML5 中的一個新元素，它可以用于在網(wǎng)頁上繪制圖形，可以用來繪制2D圖形，它提供了一些API，可以用JavaScript腳本來操縱畫布，繪制各種形狀以及圖片，以及使用線條，貝塞爾曲線，矩形，圓形，文字等；2利用 bezierCurveTo 這個方法來畫該曲線由于這個方法相關(guān)參數(shù)難以確定，我同樣選擇了一個 工具 來獲取所需要的具體參數(shù)數(shù)值至此，我們就得到了我們想要的曲線了How to Draw Quadratic Curves on an HTML5 Canvas 在；輸入命令TR回車，然后按鼠標(biāo)右鍵注意不要按錯，然后選擇不想要的線段，試一下。

2、代碼1使用SVG畫線 lt！DOCTYPE_tml lthead lttitle_TML5_utorialslttitle lthead ltbody lth2HTML5_VG_ine_xamplelth2 ltsvg_d=quotsvgLineTutorialquot_tyle=quotborderstylesolidborderwidth2pxquot_eight=；這個玩意有點復(fù)雜首先要獲取點擊發(fā)生鼠標(biāo)所在的坐標(biāo)然后判斷這個坐標(biāo)是否在圖形的范圍內(nèi)如果在，剛可以視為點擊了該圖形圖形本身是不能響應(yīng)事件的必須用canvas代理只是要判斷的情況有時候很復(fù)雜如果這個點所在的。

3、畫線 cxtstroke這個時候的線已經(jīng)出來了 關(guān)閉路徑 cxtclosePath凡事路徑圖形必須先開始路徑，畫完之后必須結(jié)束路徑 ltscript 下邊代碼是畫三角形，分空心和實心兩種實現(xiàn)ltcanvas id=quotcanvas1quot width=；H5又叫互動H5，相當(dāng)于微信上的PPT，主要時用于品牌方傳播和推廣的載體H5是指在智能手機(jī)可以播放Flash的移動端上呈現(xiàn)的，可以達(dá)到Flash效果如各種動畫，互動的，用于廣告營銷的，具有酷炫效果的網(wǎng)頁H5從2014年底的；1首先打開html編輯器，新建一個html文件，例如indexhtml2其次，在indexhtml的ltbody標(biāo)簽中，添加代碼lthr3瀏覽器運行indexhtml頁面，此時成功在html中畫了一條線；ctxstrokeRect5，5，100，100邊框起點X，Y width height ctxclosePath基礎(chǔ)線條 ctxbeginPathctxlineTo150，150ctxlineTo250，150ctxlineTo200，250ctxstrokeStyle=#39darkgreen#39ctxclosePath。

4、小伙伴，你代碼寫錯了撒，定義convas，但你用canvasgetcontext了；2筆畫停點lineTo同理，contextlineTo600，600這句的意思是從上一筆的停止點繪制到600，600這里不過要清楚，這里的moveTo``lineTo都只是狀態(tài)而已，是規(guī)劃，是我準(zhǔn)備要畫，還沒有開始畫，只是一個。

5、arrpusheoffsetYltscript模仿畫筆ltstyle type=quottextcssquot#_canvasbackgroundcolor rgb240，240，240ltstyleltheadltbodyltcanvas id=quot_canvasquotsorry， your broswer does not support html5。

6、外面一個ul，里面每一行里用一個li標(biāo)簽，然后li標(biāo)簽里包一個span和幾個input按鈕；你可以了解一下html5的ltcanvasltcanvas 大概原理是ltcanvas 在這里面，你獲取兩個點，就可以畫出一條直線了 ltcanvas 獲取兩個div的點，可以通過js，或者jq來獲得它的坐標(biāo)。