Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to achieve the functional effect of jigsaw puzzle through html5", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve the effect of jigsaw puzzle function through html5" article.

The idea of implementation is actually quite simple, mainly through the server to obtain the picture link, picture width, picture height, and then use a simple recursive implementation (note that the mobile side needs to adopt a ratio of 2, otherwise the picture will be blurred)

/ * canvas drawing data * @ param {Object []} option.photoData * @ param {string} option.photoData [] .photo-Link address of the photo * @ param {number} option.photoData [] .width-width of the photo * @ param {number} option.photoData [] .heig ht-height of the photo * @ param {Object []} option.wordData * @ Param {string} option.wordData [] .color-Color of the text * @ param {number} option.wordData [] .fontSize-size of the text * @ param {string} option.wordData [] .fontWeight-weight of the text * @ param {number} option.wordData [] .left-left margin of the text * @ param {number} option.wordData [] .top-top margin of the text @ param {string} option.wordData [] .word-content of the text * @ param {Object []} option.iconData * @ param {string} option.iconData [] .photo-icon link address * @ param {number} option.iconData [] .left-icon left margin * @ param {number} option.iconData [] .top-icon top margin * @ param {number} option.iconData [ ]. Width of width-icon * @ param {number} option.iconData [] .height-icon height * * / function canvasDraw (option) {var canvas = document.createElement ('canvas') Ctx = canvas.getContext ('2d'), clientWidth = document.documentElement.clientWidth, canvasHeight = 0, distance = 0, photoCount = 0, iconCount = 0 / / in canvas, twice the drawing on the phone will be blurred, but not on the PC. ClientWidth = clientWidth > 480,480 * 2: clientWidth * 2; option.photoData.forEach (function (item,index,picArr) {if (! index) {item.distance = 0;} else if (index) {distance + = Math.floor (clientWidth / option.photoData [index-1] .width * option.photoData [index-1] .height) item.distance = distance } canvasHeight + = Math.floor (clientWidth / item.width * item.height); item.imgHeight = Math.floor (clientWidth / item.width * item.height);}) console.log (option.photoData) if (ctx) {canvas.width = clientWidth Canvas.height = canvasHeight + clientWidth / 4 * 2 ctx.fillStyle ='# fff' ctx.fillRect (0,0, canvas.width, canvas.height) / / drawing picture text if (option.wordData.length) {option.wordData.forEach (function (item,index) {ctx.fillStyle = item.color) Ctx.font = 'normal normal' + item.fontWeight +''+ calculate (item.fontSize) +'px Microsoft YaHei'; ctx.textAlign = 'left'; ctx.fillText (item.word, calculate (item.left), canvasHeight + calculate (item.top)) })})} / / proportional calculation of the percentage spacing of different mobile phones function calculate (num) {return Math.floor (clientWidth * num / 750)} drawPhoto ('photo0') function drawPhoto (photoDom) {var photoDom = new Image () PhotoDom.setAttribute ('crossOrigin',' Anonymous'); photoDom.src = option.photodata [photocount] .photo; photoDom.onload = function () {ctx.drawImage (photoDom, 0, option.photodata [photoCount] .distance, clientWidth, option.photodata [photoCount] .imgHeight); photoCount++ If (photoCount = = option.photoData.length) {drawIcon ('icon0') function drawIcon (iconDom) {var iconDom = new Image (); iconDom.setAttribute (' crossOrigin', 'Anonymous') IconDom.src = option.iconData[ iconCount] .icon IconDom.onload = function () {ctx.drawImage (iconDom, calculate (option.iconData[ iconCount] .left), canvasHeight + calculate (option.iconDataicCount] .top), calculate (option.DataiconCount] .width), calculate (option.DataiconCount] .height) iconCount++ If (iconCount = = option.iconData.length) {var imageURL = canvas.toDataURL ("image/jpeg") document.getElementsByClassName ('shareImg') [0] .setAttribute (' src', imageURL) / / clear closure references and free memory DrawPhoto = null } else {drawIcon ('icon' + iconCount)}} Else {drawPhoto ('photo'+ photoCount)} else {console.log (' not supported canvas')}} to This is the content of the article "how to achieve the effect of jigsaw puzzle through html5" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.