您好,登錄后才能下訂單哦!
我們在瀏覽web網(wǎng)頁的時候會發(fā)現(xiàn)現(xiàn)在的網(wǎng)頁做的越來越美觀,很多動畫特效做的越來越炫酷,這離不開HTML5和css3的深入開發(fā)。今天我們要來分享一款基于HTML5和css3的文字特效——粒子效果文字動畫特效。本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用HTML5+css3實現(xiàn)粒子效果文字動畫特效,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
粒子效果文字動畫特效的原理
當(dāng)我們拿到一段文字,可以放到ps里面放大觀察,文字是由一個個很小的顏色不同的像素點繪制出來的,那么粒子效果文字動畫特效需要做的就是通過降低像素數(shù)使像素點變成圓形,再拼湊出文字內(nèi)容??偟膩碚f就是通過將輸入的信息轉(zhuǎn)化為圖片后,讀取圖片的像素信息,同時粗略的將圖片分塊,遍歷每塊區(qū)域中的像素點判斷該塊是否需要畫一個粒子。
實現(xiàn)粒子效果文字動畫特效的步驟
步驟一:文字轉(zhuǎn)化為圖片插入canvas
function loadCanvas(value) { var fontSize = 100, width = calWordWidth(value, fontSize), canvas = document.createElement('canvas') canvas.id = 'b_canvas' canvas.width = width canvas.height = fontSize var ctx = canvas.getContext('2d') ctx.font = fontSize + "px Microsoft YaHei" ctx.fillStyle = "orange" ctx.fillText(value, 0, fontSize / 5 * 4) getImage(canvas, ctx) } function getImage(canvas, ctx) { var image = new Image() image.src = canvas.toDataURL("image/jpeg") image.onload = function() }
步驟二:降低像素數(shù)
var imageData = ctx.getImageData(0, 0, this.width, this.height) var dataLength = imageData.data.length var diff = 4 var newCanvas = document.getElementById('canvas') var newCtx = newCanvas.getContext('2d') for (var j = 0; j < this.height; j += diff) { for (var i = 0; i < this.width; i += diff) { var colorNum = 0 for (var k = 0; k < diff * diff; k++) { var row = k % diff var col = ~~(k / diff) let r = imageData.data[((j + col) * this.width + i + row) * 4 + 0] let g = imageData.data[((j + col) * this.width + i + row) * 4 + 1] let b = imageData.data[((j + col) * this.width + i + row) * 4 + 2] if (r < 10 && g < 10 && b < 10) colorNum++ } if (colorNum < diff * diff / 3 * 2) { var option = { x: i, y: j, radius: 6, color: '#fff' } var newBubble = new Bubble(option) newBubble.draw(newCtx) } } }
效果如圖所示
以上就是如何使用HTML5+css3實現(xiàn)粒子效果文字動畫特效(附完整代碼)的詳細內(nèi)容,更多請關(guān)注億速云其它相關(guān)文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。