整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5和CSS3現在越來越備受網站建設者們的關注，它既簡單，且網頁版也好看。那么生成器就在自動生成代碼時扮演者重要角色，它們非常適用于那些要做很多重復性工作的開發人員和設計人員，生成器可以幫他們解決這些繁瑣的工作。在本文中，我們精心挑選了一些經驗豐富開發人員和設計人員常用HTML5、CSS3代碼生成器。
HTML5代碼生成器
網上有五六種可以生成優質代碼的HTML5生成器，其中的真諦是HTML5樣板文件，我們不要自以為然的把樣板文件當成是生成器，雖說這樣，大多數開發者還是把它當作是他們第一個網站的模板。回到主題，要找到一個好的HTML5生成器并不是那么容易的事，因為網上有成千上萬的網站提供各種各樣的代碼生成器。正因為如此，我們經常會被搞的稀里糊涂。不過，我們還是設法找到了一些比較好的生成器在本文中分享給大家。
Shikiryu HTML5生成器
Shikiryu HTML5生成器可以讓你為應用程序添加一個中介器，而且很多人都喜歡這么用。你可以在模板里面增加特性和修改布局。事實上，這個是非常實用的。開發人員更鐘愛這個生成器，因為相比其他的生成器，這個語義性更強，更易懂。
Initializr生成器
如果你要新建一個以HTML5樣板文件為基礎的項目，這將是你要開始你項目的好工具。它可以生成一個簡潔的可自定義的模板。當你從各式各樣的框架和類庫中選擇或是自定義模板時，模板就會以壓縮文件的格式下載下來，然后你就可以拿這些代碼來設計你的網站了。
Quackit HTML5生成器
Quackit 不僅可以給你提供一系列的代碼，還允許你輸入你的所有信息。這對初學者非常有幫助。所以，如果一開始你學的是CSS和html，你就可以用這個生成器來簡化你的工作任務了。這些生成器可以說是非常棒的，因為它們專注于圓角邊框，陰影，顏色漸變以及和html5模板的設計。
Modernizr生成器
Modernizr是一個開源的腳本類庫，它可以幫助你建立HTML5和CSS3來使你的網站更強大。這樣你就可以創建一些很好的，而且可以完美運行你代碼的網站，不管用戶用的是什么樣的瀏覽器或是什么樣的設備，都能優雅的展現。
CSS 代碼生成器
CSS3 Maker
你可以很容易在網上找到這個生成器。一旦你開始用這個生成器，我相信你一定會完全依賴它的。有了它，你可以做很多動畫、自定義字體、文本滾動、盒子模型陰影、圓角邊框、文字陰影、過渡、漸變等等方面的效果。
me
個人而言，我是很喜歡這個生成器， CSS3.me是由設計師Eric Hoffman設計出來的。它使用起來很簡便，是一個輕量級的、個性化而又功能強大的生成器。你可以用它來設置透明度、下拉陰影，改變和設置圓角邊框，增加漸變效果等等。
CSS3-Tricks 按鈕生成器
這是一個很經典古老的按鈕生成器，它是非常線性的，而且沒有圖形界面。你可以在你的項目中用它來生成沒有任何效果的按鈕。
圖片邊框和圓角邊框生成器
1.圓角邊框生成器（Border-Radius）
這是個非常好的、輕量級的工具，主要拿來設置邊角的圓角邊框。一旦完成了邊角設置，就可以在瀏覽器上檢查你想要包含的前綴，這些都是已經完成了的。是個界面很簡潔友好的生成器。
2.圖片邊框生成器（Border-Image)
假如你要畫一個箭頭或是一個三角形時，想讓生成器把它平鋪到你的網站邊框或者是元素邊框。這是最好用的圖片邊框生成器，當它要復制圖片去找到最合適的邊框樣式時候。也就是說，屆時，你就可以操作設置它的大小、偏移量，可以平鋪這張圖片等等。開發者經常喜歡拿它來設置背景。
CSS3漸變效果生成器
Color Zilla Gradient 生成器
此編輯器綁定了非常多的特性，用起來也非常容易。你可以單單稍微移動一下畫筆就可以觀察到他們的變化。它也可以在瀏覽器上直接使用，非常適合在網頁上開發的開發人員和設計人員。
@fontface 生成器
這個生成器可以讓你上傳網頁上的字體或是系統里面的字體。然后生成一個可以拿來用的輸出文件。這個生成器給字體屬性生成了一個CSS文件，然后字體就可以顯示在HTML文件里了。這是一個非常好的檢查字體工具，尤其是你沒有足夠的時間去創建一個使用許多重復性字體的完整的網站時候。
CSS3下拉陰影生成器
Webestools 陰影生成器
如果你想要對下拉陰影效果有更深、更具體的運用，這個生成器是我最強烈推薦的。因為它自帶調節欄，外部陰影，內部陰影的設置，還可以設置陰影的顏色，偏移量和很多你意想不到的炫酷效果。
HTML5與CSS3如果協調的好，就會為您減輕部分工作壓力，且能節省更多的精力。工具的好壞取決于您怎么去使用/去看待的，希望此篇文章能給您有所本幫！
果細心地觀察那些閱讀轉發破萬的H5，它們除了本身極具特色的創意之外，排版與動效功能的應用也是恰到好處。
所以今天我們就分別從【排版】來給大家闡釋，如何讓自己創作的H5更具傳播性。
【注：本文案例均出自www.ih5.cn，國內HTML5云制作服務平臺】
canvas 是 HTML5 新增的一個標簽, 表示畫布
●canvas 也是 h5 的畫布技術, 我們通過代碼的方式在畫布上描繪一個圖像
canvas 標簽
●向進行 canvas 繪圖, 首先我們先要了解到 canvas 標簽
●是 html5 推出的一個標簽
<html>
<head>
...
</head>
<body>
<canvas></canvas>
</body>
</html>○canvas 默認是一個行內塊元素
○canvas 默認畫布大小是 300 * 150
○canvas 默認沒有邊框, 背景默認為無色透明
canvas 畫布大小
●我們在繪圖之前, 先要確定一個畫布的大小
○因為畫布默認是按照比例調整
○所以我們調整寬度或者高度的時候, 調整一個, 另一個自然會按照比例自己調整
○我們也可以寬高一起調整
●調整畫布大小有兩種方案
○第一種 : 通過 css 樣式 ( 不推薦 )
<html>
<head>
<style>
canvas {
width: 1000px;
height: 500px;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
</html>○第二種 : 通過標簽屬性 ( 推薦 )
<html>
<head>
...
</head>
<body>
<canvas width="1000" height="500"></canvas>
</body>
</html>●兩種方案的區別
○通過 css 樣式的調整方案, 不推薦
是因為這個方案其實并沒有設置了畫布的大小
而是把原先 300 * 150 的畫布, 將他的可視窗口變成了 1000 * 500
所以真實畫布并沒有放大, 只是可視程度變大了
舉個例子 : 就是你把一個 300 * 150 的圖片, 放大到 1000 * 500 的大小來看
所以這個方式我們及其不推薦
○通過屬性的調整方案, 推薦
這個才是真正的調整畫布的的大小
也就是我們會在一個 1000 * 500 的畫布上進行繪制
●畫布的坐標
○canvas 畫布是和我們 css 的坐標系一樣的
○從 canvas 的左上角為 0 0 左邊, 分別向右向下延伸為正方向
canvas 初體驗
●準備工作已經完成了, 我們可以開始體驗一下繪制了
●其實 canvas 畫布很簡單, 就和我們 windows 電腦的畫板工具是一樣的道理
●思考 :
我們在 windows 這個畫板上繪制內容的時候
我們一定是先選定一個工具 ( 畫筆, 矩形, 圓形, ... )
設定好樣式 ( 粗細, 顏色 )
然后開始繪制
●其實在 canvas 繪制也是一個道理
拿到一個畫布工具箱
從工具箱中選定工具
設定樣式
開始繪制
●初體驗步驟
●index.html
<html>
<head>
...
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
<script src="./index.js"></script>
</body>
</html>●index.js
// 0. 獲取到頁面上的 canvas 標簽元素節點
const canvasEle=document.querySelector('#canvas')
// 1. 獲取當前這個畫布的工具箱
// 語法: canvas 元素.getContext('2d')
const ctx=canvasEle.getContext('2d')
// 2. 開始繪制
// 2-1. 講畫筆移動到一個指定位置開始下筆
// 語法: 工具箱.moveTo(x軸坐標, y軸坐標)
ctx.moveTo(100, 100)
// 2-2. 將筆移動到一個指定位置, 畫下一條軌跡
// 注意: 這里是沒有顯示的, 因為只是畫了一個軌跡
// 語法: 工具箱.lineTo(x軸坐標, y軸坐標)
ctx.lineTo(300, 100)
// 2-3. 設定本條線的樣式
// 設定線的寬度
// 語法: 工具箱.lineWidth=數字
ctx.lineWidth=10
// 設定線的顏色
// 語法: 工具箱.strokeStyle='顏色'
ctx.strokeStyle='#000'
// 2-4. 描邊
// 把上邊畫下的痕跡按照設定好的樣式描繪下來
// 語法: 工具箱.stroke()
ctx.stroke()●至此我們的第一個線段就繪制完畢, 畫布上就會出現一條線段
○從坐標 ( 100, 100 ) 繪制到坐標 ( 300, 100 )
○線段長度為 200px
○線段寬度為 10px
○線段顏色為 '#000' ( 黑色 )
canvas 線寬顏色問題
●剛才我們經過了初體驗, 畫了一個線段
●看似沒有問題, 也出現了線段, 但是其實內在是有一些問題的
●我們先來觀察
●這次我們再來畫一個線段
○從坐標 ( 100, 100 ) 繪制到坐標 ( 300, 100 )
○線段長度為 200px
○線段寬度為 1px
○線段顏色為 '#000' ( 黑色 )
// 0. 獲取到頁面上的 canvas 標簽元素節點
const canvasEle=document.querySelector('#canvas')
// 1. 獲取當前這個畫布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 開始繪制
ctx.moveTo(100, 100)
// 2-2. 將筆移動到一個指定位置, 畫下一條軌跡
ctx.lineTo(300, 100)
// 2-3. 設定本條線的樣式
// 設定線的寬度
ctx.lineWidth=10
// 設定線的顏色
ctx.strokeStyle='#000'
// 2-4. 描邊
ctx.stroke()●效果出現了, 沒有什么問題
●只是看上去不太想 1px, 而且顏色有些淺
●不著急, 我們再來畫一個線段
○從坐標 ( 100, 100 ) 繪制到坐標 ( 300, 100 )
○線段長度為 200px
○線段寬度為 2px
○線段顏色為 '#000' ( 黑色 )
●這個時候問題就出現了
○兩次畫出來的線段, 一次設置 1px 一次設置 2px
○感覺上 線寬度 一樣
○兩次畫出來的線段, 兩次都是設置為 '#000' 的顏色
○但是感覺上顏色不太一樣
●這是因為瀏覽器在描述內容的時候, 最小的描述單位是 1px
●我們來模擬一下瀏覽器繪制的內容
○假設這是我們瀏覽器描述的畫布中的像素點
○我們來做一個坐標的標記
○現在呢不關注線的長度和坐標, 我們就畫一個寬度為 1px 的線段
○我們來剖析一下問題
因為在描繪這個線段的時候, 會把線段的最中心點放在這個像素點位上
也就是說, 在描述線寬的時候, 實際上會從 0.5px 的位置繪制到 1.5px 的位置
合計描述寬度為 1px
但是瀏覽器的最小描述為 1px
這里說的不是最小寬度為 1px, 是瀏覽器不能在非整數像素開始描述
也就是說瀏覽器沒辦法從 0.5 開始繪制, 也沒有辦法繪制到 1.5 停止
那么就只能是從 0 開始繪制到 2
所以線寬就會變成 2px 了
因為本身一個像素的黑色被強制拉伸到兩個像素寬度, 所以顏色就會變淺
就像我們一杯墨水, 倒在一個杯子里面就是黑色
但是到在一個杯子里面的時候, 又倒進去一杯水, 顏色就會變淺
○實際描繪出來的樣子
○這就變成了我們剛才看到的樣子
●所以, 我們在進行 canvas 繪制內容的時候, 涉及到線段的時候
●我們一般不會把線段寬度設置成奇數, 一般都是偶數的
canvas 繪制平行線
●剛才我們繪制了線段, 接下來我們來繪制一個平行線, 也就是兩個線段
●小伙伴: " 一個簡單的效果, 想到就搞 "
// 0. 獲取到頁面上的 canvas 標簽元素節點
const canvasEle=document.querySelector('#canvas')
// 1. 獲取當前這個畫布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 開始繪制第一個線段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
ctx.stroke()
// 3. 開始繪制第二個線段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
ctx.stroke()●沒有問題, 效果實現了
●接下來, 咱們稍微增加一下需求
○第一個線段線寬 2px, 黑色
○第二個線段線寬 10px, 紅色
●這也簡單啊, 稍微修改一下
// 0. 獲取到頁面上的 canvas 標簽元素節點
const canvasEle=document.querySelector('#canvas')
// 1. 獲取當前這個畫布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 開始繪制第一個線段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
ctx.stroke()
// 3. 開始繪制第二個線段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=10
ctx.strokeStyle='red'
ctx.stroke()●這是什么鬼, 為什么兩個線段都變了, 不是應該只改變一個嗎 ?
這是因為我們并沒有告訴他這是兩個不一樣的線段
所以在設置線段樣式的時候, 會默認按照最后一次設置的樣式來繪制所有的線段
我們要想讓第一個線段繪制完畢以后, 和第二個沒有關系
我們需要告訴畫布, 我的這個線段結束了, 后面的不要和我扯上關系
// 0. 獲取到頁面上的 canvas 標簽元素節點
const canvasEle=document.querySelector('#canvas')
// 1. 獲取當前這個畫布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 開始繪制第一個線段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
ctx.stroke()
// 3. 結束之前的繪制內容
// 語法: 工具箱.beginPath()
ctx.beginPath()
// 4.. 開始繪制第二個線段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=10
ctx.strokeStyle='red'
ctx.stroke()●這樣才是我們的需求
canvas 繪制三角形
●畫完了線段, 咱們就來畫一個簡單的圖形, 畫一個三角形
●其實就是由三個線段組成, 用三個線段圍成一個封閉圖形即可
// 0. 獲取到頁面上的 canvas 標簽元素節點
const canvasEle=document.querySelector('#canvas')
// 1. 獲取當前這個畫布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 開始繪制第一個線段
// 三角形第一個點
ctx.moveTo(100, 100)
// 三角形第二個點
ctx.lineTo(200, 100)
// 三角形第三個點
ctx.lineTo(200, 200)
// 回到第一個點
ctx.lineTo(100, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
// 描邊
ctx.stroke()●看似沒啥問題, 一個三角形就出來了
●但是我們仔細觀察一下三角形的第一個角
●因為這是兩個線段, 只是畫到了一個點, 不可能重疊出一個 尖兒~~
●這個時候, 我們就不能這樣繪制三角形了
當我們要繪制閉合圖形的時候
我們不要手動繪制最后一個路徑, 而是描述出形狀
通過 canvas 讓他自動閉合
●首先, 我們繪制出形狀, 不要閉合最終路徑
// 0. 獲取到頁面上的 canvas 標簽元素節點
const canvasEle=document.querySelector('#canvas')
// 1. 獲取當前這個畫布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 開始繪制第一個線段
// 三角形第一個點
ctx.moveTo(100, 100)
// 三角形第二個點
ctx.lineTo(200, 100)
// 三角形第三個點
ctx.lineTo(200, 200)
ctx.lineWidth=2
ctx.strokeStyle='#000'
// 描邊
ctx.stroke()●接下來, 讓 canvas 來幫我們閉合這個封閉圖形
// 0. 獲取到頁面上的 canvas 標簽元素節點
const canvasEle=document.querySelector('#canvas')
// 1. 獲取當前這個畫布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 開始繪制第一個線段
ctx.moveTo(100, 100)
ctx.lineTo(200, 100)
ctx.lineTo(200, 200)
// 自動閉合圖形
// 語法: 工具箱.closePath()
ctx.closePath()
ctx.lineWidth=2
ctx.strokeStyle='#000'
// 描邊
ctx.stroke()●這個時候, 我們發現一個正常的三角形就出現了
●注意 : 閉合路徑
closePath() 這個方法
是從當前坐標點, 直接用線段的方式連接到 modeTo() 的位置
也就是從當前坐標點直接連接到開始坐標點
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
