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

單形狀繪制《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ù)

整體布局：HTML5 + css3(flex) + fontSize.js

zepto版本：Zepto v1.0

輪播組件：Swiper 3.4.1

字體圖標(biāo)：阿里iconfont字體圖標(biāo)庫(kù)

下拉刷新：mescroll v1.4.0

效果演示

了解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真正的春天。

在線咨詢

上一篇：《CSS 實(shí)戰(zhàn)指南》2024 第二章：CSS美化文本
下一篇：微信“小程序”帶動(dòng)HTML5發(fā)展數(shù)據(jù)波來(lái)助力

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

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

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

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

目介紹

效果演示

了解Flex布局

下拉刷新插件mescroll

運(yùn)行效果圖

彈窗組件wcPop

聊天功能模塊

您的項(xiàng)目需求