整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
簡單形狀繪制《HTML5系列教程18》
Canvas在HTML5中有著非常強大的功能，它不僅可以繪制一些簡單的圖案，還可以進行一些簡單形狀繪制如：圓形、三角形、矩形、圓角矩形等二維形狀，并可以根據(jù)用戶的實際需要繪制自定義二維圖形。而要完成這項功能，就需要用到CanvasRenderingContext2D對象提供的另外一些API。
1.圓形的繪制方法
在上篇文中我們使用了arc函數(shù)繪制圓弧，不知道大家有沒有注意到我們在指定圓弧結(jié)束角時使用了“2*math.PI*0.75”這樣的參數(shù)，Math.PI是計算中表示數(shù)學(xué)π的意思，我們用2π乘以0.75就是繪制了四分之三個圓，這樣就得到了一個圓弧。如果我們把0.75去掉，就能繪制一個圓形了，代碼如圖所示：
HTML5中圓形的繪制方法代碼
在谷歌瀏覽器中顯示預(yù)覽效果如圖所示：
HTML5中圓形的繪制方法效果預(yù)覽
2.三角形的繪制方法
在上一篇文章我們也學(xué)了如何繪制一條直線，那么如果我們繪制三條直線，并設(shè)置三條直線的起點和終點互相連接，這樣我們就能得到一個三角形了，繪制三角形的代碼如圖所示：
HTML中三角形的繪制方法代碼
在谷歌瀏覽器中顯示預(yù)覽效果如圖所示：
HTML中三角形的繪制方法效果預(yù)覽
3.圓角矩形的繪制方法
上面的圖形我們都是用Canvas的CanvasRenderingContext2D能夠直接提供的圖形對象，那如果需要繪制如圓角矩形這樣特殊一點的圖形，我們應(yīng)該怎樣繪制呢？那么這里就需要用到另外幾個API對象了，通過一些特殊的處理，繪制出符合我們要求的圖形。在下面的代碼中，我們使用了arcTo函數(shù)繪制圓角矩形，該函數(shù)的描述見下表：
HTML5中arcTo函數(shù)詳情描述
arcTo函數(shù)為我們提供了兩條切線之間圓弧的繪制方法，圓角矩形是由四個這樣的圓弧和四條直線組成的，所以只要我們能精確控制圓弧和直線的每個點，就能準(zhǔn)確繪制出一個圓角矩形。繪制圓角矩形的代碼如圖所示：
在HTML5中圓角矩形的繪制方法代碼
在谷歌瀏覽器中顯示預(yù)覽效果如圖所示：
在HTML5中圓角矩形的繪制方法效果預(yù)覽
4.簡單的自定義圖形繪制“微笑表情繪制”
雖然Canvas提供了很多基本圖形的繪制，但在實際應(yīng)用中，經(jīng)常會需要繪制一些復(fù)雜的圖形，而Canvas卻并沒有提供繪制這些圖案的API，所以這時候就需要使用多種繪圖方法來繪制這些圖形。以下是作為示例所繪制的一個簡單的自定義圖形“微笑表情”
在HTML中微笑表情繪制方法代碼
在谷歌瀏覽器中顯示預(yù)覽效果如圖所示：
在HTML中微笑表情繪制方法效果預(yù)覽
日常生活中可以見到很多不規(guī)則的圖形，你可以想到些什么圖形呢？大家可以嘗試一下利用已經(jīng)學(xué)了的知識把自己想到的一些簡單形狀繪制出來。祝大家：身體健康、生活愉快！
采用html5+css3+Zepto+swiper+wcPop+flex等技術(shù)開發(fā)的聊天實例。實現(xiàn)發(fā)送消息/表情，圖片/視頻預(yù)覽，添加好友/群聊，語音模塊，地圖定位模塊，整體功能界面效果類似微信聊天。
使用技術(shù)
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
Flex | Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
https://www.runoob.com/w3cnote/flex-grammar.html2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項功能。Flex 布局將成為未來布局的首選方案。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
如上圖：容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）
想要了解Flex布局更多的用法，可以去網(wǎng)上查閱相關(guān)資料，這里不作詳細概述了。
mescroll | 精致的下拉刷新和上拉加載 js框架.支持vue,完美運行于移動端和主流PC瀏覽器。
http://www.mescroll.com/https://github.com/mescroll/mescroll注意：如果你是uni-app開發(fā)者，下面是mescroll的uniapp版本
http://www.mescroll.com/uni.htmlwcpop是一個手機端彈窗插件，提供了多種類型的彈窗功能，有ios、android彈窗效果
// 基本使用
wcPop({
//傳入?yún)?shù)
})如上圖 彈窗菜單，使用下面代碼即可實現(xiàn)
$("#J_chatList").on("contextmenu", ".item", function (e) {
e.preventDefault();
//獲取長按坐標(biāo)點
var _points = [e.pageX, e.pageY];
wcPop({
skin: 'contextmenu',
follow: _points,
opacity: 0,
btns: [
{
text: '發(fā)送給朋友',
style: 'color:#212121;',
onTap() {...}
},
{text: '復(fù)制'},
{text: '收藏'},
{text: '撤回'},
{text: '刪除'},
]
});
});function wchat_ToBottom() {
$(".mescroll").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
}// 定義最后光標(biāo)位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {
getRange: function () {
if (_sel && _sel.rangeCount > 0) {
return _sel.getRangeAt(0);
}
},
addRange: function () {
if (_lastRange) {
_sel.removeAllRanges();
_sel.addRange(_lastRange);
}
}
}
// 聊天插入表情
$("#J__swiperEmotion").on("click", ".face_item", function () {
var that = $(this), range;
var img = that[0].cloneNode(true);
if (!_editor.childNodes.length) {
_editor.focus();
}
_editor.blur(); //輸入表情時禁止輸入法
setTimeout(function () {
if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(img);
} else if (window.getSelection && window.getSelection().getRangeAt) {
range = _rng.getRange();
range.insertNode(img);
range.collapse(false);
//記錄當(dāng)前光標(biāo)位置 (否則光標(biāo)會跑到表情前面)
_lastRange = range;
_rng.addRange();
}
}, 10);
});function isEmpty() {
var html = $editor.html();
html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
html = html.replace(/<[^img].*?>/ig, "");
html = html.replace(/ /ig, "");
return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}?? 最后
如果你覺得這篇文章對你有幫助，麻煩點個「關(guān)注/轉(zhuǎn)發(fā)」，讓更多的人也能看到你的分享！
orketing獨家整理，轉(zhuǎn)載注明來源
從“神經(jīng)貓”開始，HTML5的風(fēng)暴只用半年時間便席卷了整個移動互聯(lián)網(wǎng)行業(yè)，讓本就躁動的互聯(lián)網(wǎng)再起波瀾。對于H5的未來，不少業(yè)界人士都有著較高的期待，但唱衰的也大有人在，即便HTML5標(biāo)準(zhǔn)的定稿也沒有使這樣的情況有所好轉(zhuǎn)。那么，對于H5人們分歧的焦點在哪？又都有怎樣的見解？小編根據(jù)最近的各家言辭，整理了目前討論最多的問題，進行了一場小PK。
一：HTML5固定標(biāo)準(zhǔn)VS動態(tài)標(biāo)準(zhǔn)
HTML5標(biāo)準(zhǔn)公布的意義在于制定了一個新的規(guī)范，建立了一個統(tǒng)一的平臺。未來，借助HTML5技術(shù)，開發(fā)者可快速開發(fā)各種移動互聯(lián)網(wǎng)應(yīng)用，有助于在移動智能終端方面擺脫iOS、安卓、winphone等原生態(tài)應(yīng)用的壟斷與限制，對此，業(yè)界反應(yīng)普遍樂觀。
但爭執(zhí)的焦點在于，W3C(萬維網(wǎng)聯(lián)盟)選用的是固定的標(biāo)準(zhǔn)，這就讓許多業(yè)界人士不滿，在此之前，W3C就因為與WHATWG（網(wǎng)頁超文本應(yīng)用技術(shù)工作小組）“理念不同”而分道揚鑣。WHATWG認為互聯(lián)網(wǎng)的未來是很難預(yù)測的，將來會發(fā)生什么樣的變化或者誕生什么樣的事物，都是不可獲知，而如今就用這一固定的標(biāo)準(zhǔn)去推動H5的發(fā)展，顯然不太合理。在其看來，未來 HTML5 想得到真正的發(fā)展，核心問題并不是標(biāo)準(zhǔn)哪天定稿亦或是瀏覽器性能不足，關(guān)鍵在于標(biāo)準(zhǔn)的持續(xù)改進和生態(tài)建設(shè)。
當(dāng)然，這個爭論涉及到各大巨頭間的商業(yè)競爭。無論如何，HTML5標(biāo)準(zhǔn)的定稿，對推動H5發(fā)展是顯而易見的。
二：Web App VS 原生App
要說H5的發(fā)展對誰沖擊最嚴重，原生App首當(dāng)其沖。從蘋果手機為代表的智能手機揭開移動互聯(lián)網(wǎng)時代的序幕開始，原生App大行其道，在很大程度上扮演著移動互聯(lián)網(wǎng)的入口角色。但系統(tǒng)平臺間的格局以及版本的差異，卻掣肘原生App的發(fā)展，從而形成一個個以系統(tǒng)為中心的信息孤島，這些都是與標(biāo)榜自由、開放的互聯(lián)網(wǎng)精神背道而馳的。
HTML 5之所以一經(jīng)提出便廣受業(yè)界推崇，甚至被認為是移動互聯(lián)網(wǎng)領(lǐng)域改朝換代的利器，很大原因就在于其設(shè)計之初就確立的開放原則，基于此原則的兼容、實用與跨平臺性，能將App的中心從系統(tǒng)改為用戶，打破封閉格局，更好地服務(wù)于用戶。
H5理想很美好，現(xiàn)實卻很殘酷。不可否認的是我們已經(jīng)習(xí)慣了iOS與Android生態(tài)系統(tǒng)的固定模式。從手機界面直擊點擊圖標(biāo)進入應(yīng)用被認為是最有效的方式。而H5應(yīng)用進入模式卻需要以瀏覽器或超級App等第三方為跳板，方能進入web App界面。無疑，這樣的操作流程和用戶體驗難以讓人接受，H5依舊任重而道遠。
三：流量模式VS下載模式
HTML5無端免下載的特性決定了HTML5游戲在推廣方面具有先天的優(yōu)勢，用戶進入游戲進行體驗的門檻更低。但是，流量模式運營的產(chǎn)品要基于大量的瀏覽量作為基礎(chǔ)，并且在捕獲用戶方面是“間接”的，而用戶體驗后，將其繼續(xù)留下的可能性要遠低于下載模式的原生APP。而基于下載模式，游戲產(chǎn)品還可以進入Appstore市場，留下排名、評分、還有相對成熟的渠道來吸引用戶。
此外，H5目前主要的渠道是瀏覽器，較單一的渠道形式使得這種流量模式受瀏覽器廠商的影響大，一旦瀏覽器出現(xiàn)問題，那意味著所有基于瀏覽器平臺的游戲和應(yīng)用都將受到影響。
四：成本VS性能
H5受歡迎的一個因素是其遠低于原生應(yīng)用的成本。大多數(shù)瀏覽器都有著相同的運行方式，一個應(yīng)用幾乎可以在所有瀏覽器上運行，不像限定于只能在某一系統(tǒng)下運行的原生應(yīng)用。并且，HTML5還允許不斷更新，開發(fā)者不需要再將新應(yīng)用提交給應(yīng)用商店等待批準(zhǔn)。每次用戶登錄到該web應(yīng)用時，都將獲得應(yīng)用最新版本。這些都讓開發(fā)者節(jié)省了大量的時間和資金。
相對Web應(yīng)用，原生應(yīng)用最大的優(yōu)勢就是可以訪問設(shè)備中的所有功能，運行的速度更快、性能更高，而且可以啟用優(yōu)秀的離線處理和存儲能力。
五：H5游戲，機遇VS挑戰(zhàn)
一只表情賤賤的嘚瑟白貓在朋友圈中的瘋狂刷屏，讓人們第一次認識到H5游戲的魅力。隨后，眾多HTML5小游戲相繼在微信朋友圈中躥紅。使得很多電商和傳統(tǒng)行業(yè)的廠商紛紛借助HTML5小游戲進行產(chǎn)品營銷，以增強廣告的趣味性。這一切，讓開發(fā)者們看到了H5游戲在移動端的廣闊前景。他們期望借鑒PC端社交游戲向網(wǎng)頁游戲轉(zhuǎn)變的經(jīng)驗，嘗試將極其輕度的HTML5游戲轉(zhuǎn)變?yōu)閺娪脩絷P(guān)系的社交游戲。另外，開發(fā)者甚至嘗試將HTML5游戲開發(fā)成依托瀏覽器的重度網(wǎng)頁游戲，讓玩家免于下載安裝即可體驗到大型重度移動端網(wǎng)頁游戲。而飛速發(fā)展的手機硬件和網(wǎng)絡(luò)速度為這一實現(xiàn)提供了物質(zhì)基礎(chǔ)。
但這些都還只是業(yè)界人士的遐想，從目前來看，行業(yè)內(nèi)在H5游戲的跟進力度明顯不足，現(xiàn)象級產(chǎn)品也遲遲未見。從“神經(jīng)貓”之后，就再未出現(xiàn)讓市場為之震動的產(chǎn)品。由于現(xiàn)階段H5游戲的商業(yè)化模式還不成熟，因而鮮有公司明確表示要著手向重度研發(fā)，H5游戲更多還是在作為一種營銷工具，發(fā)揮其傳播速度和范圍方面的優(yōu)勢。
六：生態(tài)缺陷VS巨頭涌入
目前H5不被看好的一個原因在于其生態(tài)圈的建設(shè)還未完成，生態(tài)缺陷讓許多希望轉(zhuǎn)入H5行業(yè)的開發(fā)者望而卻步。對于H5而言，瀏覽器廠商的支持一直是其得以發(fā)展的關(guān)鍵，但來自MAMA工具分析，完全符合W3C標(biāo)準(zhǔn)的只有4.13%的網(wǎng)站，其他50%的網(wǎng)站雖然都在HTML中標(biāo)示自己符合W3C標(biāo)準(zhǔn)，但實際上在具體網(wǎng)站建設(shè)中很少嚴格按照標(biāo)準(zhǔn)執(zhí)行。此外，被大家寄于厚望的超級 APP也沒有成為下一個機遇，微信的嚴格限制給H5開發(fā)者們澆了一盆冷水。
H5生態(tài)圈的建設(shè)雖不是一朝一夕可完成的，但各大互聯(lián)網(wǎng)巨頭的涌入無疑會加快這一進程。像百度推出了“輕應(yīng)用”概念，并向開發(fā)者和企業(yè)推出了各種技術(shù)開放接口；微信發(fā)布JS SDK，QQ瀏覽器也在進行網(wǎng)頁應(yīng)用的開放；阿里、360、搜狐等也是頻頻出手H5領(lǐng)域。而對于企業(yè)和開發(fā)者們來說，借助巨頭的平臺，開發(fā)更適合該平臺的輕應(yīng)用能為自己帶來更多的流量和資源，實現(xiàn)對客戶更好的對接。隨著參與者的不斷增加，H5生態(tài)圈的建設(shè)也將逐漸完善，但這仍是一個長期的工程。
總結(jié)
在以上對比中，似乎H5并不占據(jù)上風(fēng)，但不要忘了，H5應(yīng)用才剛興起。與早已成熟的原生應(yīng)用本就沒有太多的可比性。再者，H5的出現(xiàn)也不是以消滅原生為目的。兩者各有所長，就如有些開發(fā)者為了使H5更好地融入到當(dāng)下生態(tài)系統(tǒng)中，主動將原生APP內(nèi)嵌入webview訪問web頁面成為通行做法，用HTML5開發(fā)原生APP也早不是新鮮事。并且HTML5技術(shù)的進一步發(fā)展解決了原生APP生態(tài)的一些痼疾，例如APP的“孤島效應(yīng)”。
總的來說，HTML5的發(fā)展是適應(yīng)時代大勢，只是目前現(xiàn)實中還未有一款爆品來為其正名，從而帶動整個行業(yè)前行。一切都需要各家努力完善新的移動生態(tài)圈，才會迎來H5真正的春天。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
