整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          簡(jiǎn)單形狀繪制《HTML5系列教程18》

          單形狀繪制《HTML5系列教程18》

          簡(jiǎn)單形狀繪制《HTML5系列教程18》

          Canvas在HTML5中有著非常強(qiáng)大的功能,它不僅可以繪制一些簡(jiǎn)單的圖案,還可以進(jìn)行一些簡(jiǎn)單形狀繪制如:圓形、三角形、矩形、圓角矩形等二維形狀,并可以根據(jù)用戶的實(shí)際需要繪制自定義二維圖形。而要完成這項(xiàng)功能,就需要用到CanvasRenderingContext2D對(duì)象提供的另外一些API。

          1.圓形的繪制方法

          在上篇文中我們使用了arc函數(shù)繪制圓弧,不知道大家有沒(méi)有注意到我們?cè)谥付▓A弧結(jié)束角時(shí)使用了“2*math.PI*0.75”這樣的參數(shù),Math.PI是計(jì)算中表示數(shù)學(xué)π的意思,我們用2π乘以0.75就是繪制了四分之三個(gè)圓,這樣就得到了一個(gè)圓弧。如果我們把0.75去掉,就能繪制一個(gè)圓形了,代碼如圖所示:

          HTML5中圓形的繪制方法代碼

          在谷歌瀏覽器中顯示預(yù)覽效果如圖所示:

          HTML5中圓形的繪制方法效果預(yù)覽

          2.三角形的繪制方法

          在上一篇文章我們也學(xué)了如何繪制一條直線,那么如果我們繪制三條直線,并設(shè)置三條直線的起點(diǎn)和終點(diǎn)互相連接,這樣我們就能得到一個(gè)三角形了,繪制三角形的代碼如圖所示:

          HTML中三角形的繪制方法代碼

          在谷歌瀏覽器中顯示預(yù)覽效果如圖所示:

          HTML中三角形的繪制方法效果預(yù)覽

          3.圓角矩形的繪制方法

          上面的圖形我們都是用Canvas的CanvasRenderingContext2D能夠直接提供的圖形對(duì)象,那如果需要繪制如圓角矩形這樣特殊一點(diǎn)的圖形,我們應(yīng)該怎樣繪制呢?那么這里就需要用到另外幾個(gè)API對(duì)象了,通過(guò)一些特殊的處理,繪制出符合我們要求的圖形。在下面的代碼中,我們使用了arcTo函數(shù)繪制圓角矩形,該函數(shù)的描述見(jiàn)下表:

          HTML5中arcTo函數(shù)詳情描述

          arcTo函數(shù)為我們提供了兩條切線之間圓弧的繪制方法,圓角矩形是由四個(gè)這樣的圓弧和四條直線組成的,所以只要我們能精確控制圓弧和直線的每個(gè)點(diǎn),就能準(zhǔn)確繪制出一個(gè)圓角矩形。繪制圓角矩形的代碼如圖所示:

          在HTML5中圓角矩形的繪制方法代碼

          在谷歌瀏覽器中顯示預(yù)覽效果如圖所示:

          在HTML5中圓角矩形的繪制方法效果預(yù)覽

          4.簡(jiǎn)單的自定義圖形繪制“微笑表情繪制”

          雖然Canvas提供了很多基本圖形的繪制,但在實(shí)際應(yīng)用中,經(jīng)常會(huì)需要繪制一些復(fù)雜的圖形,而Canvas卻并沒(méi)有提供繪制這些圖案的API,所以這時(shí)候就需要使用多種繪圖方法來(lái)繪制這些圖形。以下是作為示例所繪制的一個(gè)簡(jiǎn)單的自定義圖形“微笑表情”

          在HTML中微笑表情繪制方法代碼

          在谷歌瀏覽器中顯示預(yù)覽效果如圖所示:

          在HTML中微笑表情繪制方法效果預(yù)覽

          日常生活中可以見(jiàn)到很多不規(guī)則的圖形,你可以想到些什么圖形呢?大家可以嘗試一下利用已經(jīng)學(xué)了的知識(shí)把自己想到的一些簡(jiǎn)單形狀繪制出來(lái)。祝大家:身體健康、生活愉快!

          目介紹

          采用html5+css3+Zepto+swiper+wcPop+flex等技術(shù)開發(fā)的聊天實(shí)例。實(shí)現(xiàn)發(fā)送消息/表情,圖片/視頻預(yù)覽,添加好友/群聊,語(yǔ)音模塊,地圖定位模塊,整體功能界面效果類似微信聊天。

          使用技術(shù)

        1. 整體布局:HTML5 + css3(flex) + fontSize.js
        2. zepto版本:Zepto v1.0
        3. 輪播組件:Swiper 3.4.1
        4. 字體圖標(biāo):阿里iconfont字體圖標(biāo)庫(kù)
        5. 下拉刷新:mescroll v1.4.0
        6. 效果演示

          <script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          了解Flex布局

          Flex | Flexible Box的縮寫,意為”彈性布局”,用來(lái)為盒狀模型提供最大的靈活性。

          https://www.runoob.com/w3cnote/flex-grammar.html

          2009年,W3C提出了一種新的方案—-Flex布局,可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前,它已經(jīng)得到了所有瀏覽器的支持,這意味著,現(xiàn)在就能很安全地使用這項(xiàng)功能。Flex 布局將成為未來(lái)布局的首選方案。

          采用Flex布局的元素,稱為Flex容器(flex container),簡(jiǎn)稱”容器”。它的所有子元素自動(dòng)成為容器成員,稱為Flex項(xiàng)目(flex item),簡(jiǎn)稱”項(xiàng)目”。

          如上圖:容器默認(rèn)存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)

          想要了解Flex布局更多的用法,可以去網(wǎng)上查閱相關(guān)資料,這里不作詳細(xì)概述了。

          下拉刷新插件mescroll

          mescroll | 精致的下拉刷新和上拉加載 js框架.支持vue,完美運(yùn)行于移動(dòng)端和主流PC瀏覽器。

          http://www.mescroll.com/
          https://github.com/mescroll/mescroll

          注意:如果你是uni-app開發(fā)者,下面是mescroll的uniapp版本

          http://www.mescroll.com/uni.html

          運(yùn)行效果圖

          彈窗組件wcPop

          wcpop是一個(gè)手機(jī)端彈窗插件,提供了多種類型的彈窗功能,有ios、android彈窗效果

          // 基本使用
          wcPop({ 
            //傳入?yún)?shù)
          })

          如上圖 彈窗菜單,使用下面代碼即可實(shí)現(xiàn)

          $("#J_chatList").on("contextmenu", ".item", function (e) {
          	e.preventDefault();
          	
          	//獲取長(zhǎng)按坐標(biāo)點(diǎn)
          	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: '刪除'},
          		]
          	});
          });

          聊天功能模塊

          • 滾動(dòng)聊天消息至最底部
          function wchat_ToBottom() {
          	$(".mescroll").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
          }
          • 獲取光標(biāo)位置 | 在光標(biāo)處插入表情

          // 定義最后光標(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(); //輸入表情時(shí)禁止輸入法
          
          	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)會(huì)跑到表情前面)
          			_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, "") == "";
          }

          ?? 最后

          如果你覺(jué)得這篇文章對(duì)你有幫助,麻煩點(diǎn)個(gè)「關(guān)注/轉(zhuǎn)發(fā)」,讓更多的人也能看到你的分享!

          orketing獨(dú)家整理,轉(zhuǎn)載注明來(lái)源

          從“神經(jīng)貓”開始,HTML5的風(fēng)暴只用半年時(shí)間便席卷了整個(gè)移動(dòng)互聯(lián)網(wǎng)行業(yè),讓本就躁動(dòng)的互聯(lián)網(wǎng)再起波瀾。對(duì)于H5的未來(lái),不少業(yè)界人士都有著較高的期待,但唱衰的也大有人在,即便HTML5標(biāo)準(zhǔn)的定稿也沒(méi)有使這樣的情況有所好轉(zhuǎn)。那么,對(duì)于H5人們分歧的焦點(diǎn)在哪?又都有怎樣的見(jiàn)解?小編根據(jù)最近的各家言辭,整理了目前討論最多的問(wèn)題,進(jìn)行了一場(chǎng)小PK。

          一:HTML5固定標(biāo)準(zhǔn)VS動(dòng)態(tài)標(biāo)準(zhǔn)

          HTML5標(biāo)準(zhǔn)公布的意義在于制定了一個(gè)新的規(guī)范,建立了一個(gè)統(tǒng)一的平臺(tái)。未來(lái),借助HTML5技術(shù),開發(fā)者可快速開發(fā)各種移動(dòng)互聯(lián)網(wǎng)應(yīng)用,有助于在移動(dòng)智能終端方面擺脫iOS、安卓、winphone等原生態(tài)應(yīng)用的壟斷與限制,對(duì)此,業(yè)界反應(yīng)普遍樂(lè)觀。

          但爭(zhēng)執(zhí)的焦點(diǎn)在于,W3C(萬(wàn)維網(wǎng)聯(lián)盟)選用的是固定的標(biāo)準(zhǔn),這就讓許多業(yè)界人士不滿,在此之前,W3C就因?yàn)榕cWHATWG(網(wǎng)頁(yè)超文本應(yīng)用技術(shù)工作小組)“理念不同”而分道揚(yáng)鑣。WHATWG認(rèn)為互聯(lián)網(wǎng)的未來(lái)是很難預(yù)測(cè)的,將來(lái)會(huì)發(fā)生什么樣的變化或者誕生什么樣的事物,都是不可獲知,而如今就用這一固定的標(biāo)準(zhǔn)去推動(dòng)H5的發(fā)展,顯然不太合理。在其看來(lái),未來(lái) HTML5 想得到真正的發(fā)展,核心問(wèn)題并不是標(biāo)準(zhǔn)哪天定稿亦或是瀏覽器性能不足,關(guān)鍵在于標(biāo)準(zhǔn)的持續(xù)改進(jìn)和生態(tài)建設(shè)。

          當(dāng)然,這個(gè)爭(zhēng)論涉及到各大巨頭間的商業(yè)競(jìng)爭(zhēng)。無(wú)論如何,HTML5標(biāo)準(zhǔn)的定稿,對(duì)推動(dòng)H5發(fā)展是顯而易見(jiàn)的。

          二:Web App VS 原生App

          要說(shuō)H5的發(fā)展對(duì)誰(shuí)沖擊最嚴(yán)重,原生App首當(dāng)其沖。從蘋果手機(jī)為代表的智能手機(jī)揭開移動(dòng)互聯(lián)網(wǎng)時(shí)代的序幕開始,原生App大行其道,在很大程度上扮演著移動(dòng)互聯(lián)網(wǎng)的入口角色。但系統(tǒng)平臺(tái)間的格局以及版本的差異,卻掣肘原生App的發(fā)展,從而形成一個(gè)個(gè)以系統(tǒng)為中心的信息孤島,這些都是與標(biāo)榜自由、開放的互聯(lián)網(wǎng)精神背道而馳的。

          HTML 5之所以一經(jīng)提出便廣受業(yè)界推崇,甚至被認(rèn)為是移動(dòng)互聯(lián)網(wǎng)領(lǐng)域改朝換代的利器,很大原因就在于其設(shè)計(jì)之初就確立的開放原則,基于此原則的兼容、實(shí)用與跨平臺(tái)性,能將App的中心從系統(tǒng)改為用戶,打破封閉格局,更好地服務(wù)于用戶。

          H5理想很美好,現(xiàn)實(shí)卻很殘酷。不可否認(rèn)的是我們已經(jīng)習(xí)慣了iOS與Android生態(tài)系統(tǒng)的固定模式。從手機(jī)界面直擊點(diǎn)擊圖標(biāo)進(jìn)入應(yīng)用被認(rèn)為是最有效的方式。而H5應(yīng)用進(jìn)入模式卻需要以瀏覽器或超級(jí)App等第三方為跳板,方能進(jìn)入web App界面。無(wú)疑,這樣的操作流程和用戶體驗(yàn)難以讓人接受,H5依舊任重而道遠(yuǎn)。

          三:流量模式VS下載模式

          HTML5無(wú)端免下載的特性決定了HTML5游戲在推廣方面具有先天的優(yōu)勢(shì),用戶進(jìn)入游戲進(jìn)行體驗(yàn)的門檻更低。但是,流量模式運(yùn)營(yíng)的產(chǎn)品要基于大量的瀏覽量作為基礎(chǔ),并且在捕獲用戶方面是“間接”的,而用戶體驗(yàn)后,將其繼續(xù)留下的可能性要遠(yuǎn)低于下載模式的原生APP。而基于下載模式,游戲產(chǎn)品還可以進(jìn)入Appstore市場(chǎng),留下排名、評(píng)分、還有相對(duì)成熟的渠道來(lái)吸引用戶。

          此外,H5目前主要的渠道是瀏覽器,較單一的渠道形式使得這種流量模式受瀏覽器廠商的影響大,一旦瀏覽器出現(xiàn)問(wèn)題,那意味著所有基于瀏覽器平臺(tái)的游戲和應(yīng)用都將受到影響。

          四:成本VS性能

          H5受歡迎的一個(gè)因素是其遠(yuǎn)低于原生應(yīng)用的成本。大多數(shù)瀏覽器都有著相同的運(yùn)行方式,一個(gè)應(yīng)用幾乎可以在所有瀏覽器上運(yùn)行,不像限定于只能在某一系統(tǒng)下運(yùn)行的原生應(yīng)用。并且,HTML5還允許不斷更新,開發(fā)者不需要再將新應(yīng)用提交給應(yīng)用商店等待批準(zhǔn)。每次用戶登錄到該web應(yīng)用時(shí),都將獲得應(yīng)用最新版本。這些都讓開發(fā)者節(jié)省了大量的時(shí)間和資金。

          相對(duì)Web應(yīng)用,原生應(yīng)用最大的優(yōu)勢(shì)就是可以訪問(wèn)設(shè)備中的所有功能,運(yùn)行的速度更快、性能更高,而且可以啟用優(yōu)秀的離線處理和存儲(chǔ)能力。

          五:H5游戲,機(jī)遇VS挑戰(zhàn)

          一只表情賤賤的嘚瑟白貓?jiān)谂笥讶χ械寞偪袼⑵?,讓人們第一次認(rèn)識(shí)到H5游戲的魅力。隨后,眾多HTML5小游戲相繼在微信朋友圈中躥紅。使得很多電商和傳統(tǒng)行業(yè)的廠商紛紛借助HTML5小游戲進(jìn)行產(chǎn)品營(yíng)銷,以增強(qiáng)廣告的趣味性。這一切,讓開發(fā)者們看到了H5游戲在移動(dòng)端的廣闊前景。他們期望借鑒PC端社交游戲向網(wǎng)頁(yè)游戲轉(zhuǎn)變的經(jīng)驗(yàn),嘗試將極其輕度的HTML5游戲轉(zhuǎn)變?yōu)閺?qiáng)用戶關(guān)系的社交游戲。另外,開發(fā)者甚至嘗試將HTML5游戲開發(fā)成依托瀏覽器的重度網(wǎng)頁(yè)游戲,讓玩家免于下載安裝即可體驗(yàn)到大型重度移動(dòng)端網(wǎng)頁(yè)游戲。而飛速發(fā)展的手機(jī)硬件和網(wǎng)絡(luò)速度為這一實(shí)現(xiàn)提供了物質(zhì)基礎(chǔ)。

          但這些都還只是業(yè)界人士的遐想,從目前來(lái)看,行業(yè)內(nèi)在H5游戲的跟進(jìn)力度明顯不足,現(xiàn)象級(jí)產(chǎn)品也遲遲未見(jiàn)。從“神經(jīng)貓”之后,就再未出現(xiàn)讓市場(chǎng)為之震動(dòng)的產(chǎn)品。由于現(xiàn)階段H5游戲的商業(yè)化模式還不成熟,因而鮮有公司明確表示要著手向重度研發(fā),H5游戲更多還是在作為一種營(yíng)銷工具,發(fā)揮其傳播速度和范圍方面的優(yōu)勢(shì)。

          六:生態(tài)缺陷VS巨頭涌入

          目前H5不被看好的一個(gè)原因在于其生態(tài)圈的建設(shè)還未完成,生態(tài)缺陷讓許多希望轉(zhuǎn)入H5行業(yè)的開發(fā)者望而卻步。對(duì)于H5而言,瀏覽器廠商的支持一直是其得以發(fā)展的關(guān)鍵,但來(lái)自MAMA工具分析,完全符合W3C標(biāo)準(zhǔn)的只有4.13%的網(wǎng)站,其他50%的網(wǎng)站雖然都在HTML中標(biāo)示自己符合W3C標(biāo)準(zhǔn),但實(shí)際上在具體網(wǎng)站建設(shè)中很少嚴(yán)格按照標(biāo)準(zhǔn)執(zhí)行。此外,被大家寄于厚望的超級(jí) APP也沒(méi)有成為下一個(gè)機(jī)遇,微信的嚴(yán)格限制給H5開發(fā)者們澆了一盆冷水。

          H5生態(tài)圈的建設(shè)雖不是一朝一夕可完成的,但各大互聯(lián)網(wǎng)巨頭的涌入無(wú)疑會(huì)加快這一進(jìn)程。像百度推出了“輕應(yīng)用”概念,并向開發(fā)者和企業(yè)推出了各種技術(shù)開放接口;微信發(fā)布JS SDK,QQ瀏覽器也在進(jìn)行網(wǎng)頁(yè)應(yīng)用的開放;阿里、360、搜狐等也是頻頻出手H5領(lǐng)域。而對(duì)于企業(yè)和開發(fā)者們來(lái)說(shuō),借助巨頭的平臺(tái),開發(fā)更適合該平臺(tái)的輕應(yīng)用能為自己帶來(lái)更多的流量和資源,實(shí)現(xiàn)對(duì)客戶更好的對(duì)接。隨著參與者的不斷增加,H5生態(tài)圈的建設(shè)也將逐漸完善,但這仍是一個(gè)長(zhǎng)期的工程。

          總結(jié)

          在以上對(duì)比中,似乎H5并不占據(jù)上風(fēng),但不要忘了,H5應(yīng)用才剛興起。與早已成熟的原生應(yīng)用本就沒(méi)有太多的可比性。再者,H5的出現(xiàn)也不是以消滅原生為目的。兩者各有所長(zhǎng),就如有些開發(fā)者為了使H5更好地融入到當(dāng)下生態(tài)系統(tǒng)中,主動(dòng)將原生APP內(nèi)嵌入webview訪問(wèn)web頁(yè)面成為通行做法,用HTML5開發(fā)原生APP也早不是新鮮事。并且HTML5技術(shù)的進(jìn)一步發(fā)展解決了原生APP生態(tài)的一些痼疾,例如APP的“孤島效應(yīng)”。

          總的來(lái)說(shuō),HTML5的發(fā)展是適應(yīng)時(shí)代大勢(shì),只是目前現(xiàn)實(shí)中還未有一款爆品來(lái)為其正名,從而帶動(dòng)整個(gè)行業(yè)前行。一切都需要各家努力完善新的移動(dòng)生態(tài)圈,才會(huì)迎來(lái)H5真正的春天。


          主站蜘蛛池模板: 精品国产一区二区三区久| 国产午夜福利精品一区二区三区| 久久影院亚洲一区| 国产日韩一区二区三区| 中文字幕在线无码一区| 国产色精品vr一区区三区| 精品无码国产一区二区三区51安| 色噜噜AV亚洲色一区二区| 欲色影视天天一区二区三区色香欲 | 精品乱码一区内射人妻无码| 国产福利91精品一区二区| 国产免费一区二区三区不卡| 久久精品国产亚洲一区二区三区 | 国产伦精品一区三区视频| 无码aⅴ精品一区二区三区| 无码av免费毛片一区二区| 免费无码VA一区二区三区| 日韩内射美女人妻一区二区三区| 国产av熟女一区二区三区| 日本一区二区三区高清| 国产亚洲一区二区在线观看| 亚洲综合无码AV一区二区 | 麻豆一区二区99久久久久| 久久精品无码一区二区无码| 亚洲一区二区三区日本久久九| 99精品国产高清一区二区| 精品欧洲av无码一区二区14| 精品午夜福利无人区乱码一区| 最新欧美精品一区二区三区| 亚洲一区二区三区高清在线观看 | 久久久无码精品国产一区| 久久久久久人妻一区精品| 麻豆国产一区二区在线观看| 国产乱人伦精品一区二区| 日本一区二区三区日本免费| 亚洲一区视频在线播放| 国产精品无码一区二区三级| 亚洲AV无码一区二区三区人| 成人一区专区在线观看| V一区无码内射国产| 久久久av波多野一区二区|