您好,登錄后才能下訂單哦!
這篇“怎么通過html5實(shí)現(xiàn)拼圖功能效果”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“怎么通過html5實(shí)現(xiàn)拼圖功能效果”文章吧。
實(shí)現(xiàn)的思路其實(shí)挺簡單的,主要是通過服務(wù)端獲取圖片鏈接,圖片寬度,圖片高度,然后利用簡單的遞歸實(shí)現(xiàn)就行了(注意移動(dòng)端需要采用2倍數(shù)的比例,否則會(huì)出現(xiàn)圖片模糊的問題)
/**
* canvas繪圖數(shù)據(jù)
* @param {Object[]} option.photoData
* @param {string} option.photoData[].photo - 照片的鏈接地址
* @param {number} option.photoData[].width - 照片的寬度
* @param {number} option.photoData[].height - 照片的高度
* @param {Object[]} option.wordData
* @param {string} option.wordData[].color - 文字的顏色
* @param {number} option.wordData[].fontSize - 文字的大小
* @param {string} option.wordData[].fontWeight - 文字的粗細(xì)
* @param {number} option.wordData[].left - 文字的左邊距
* @param {number} option.wordData[].top - 文字的上邊距
* @param {string} option.wordData[].word - 文字的內(nèi)容
* @param {Object[]} option.iconData
* @param {string} option.iconData[].photo - icon的鏈接地址
* @param {number} option.iconData[].left - icon的左邊距
* @param {number} option.iconData[].top - icon的上邊距
* @param {number} option.iconData[].width - icon的寬度
* @param {number} option.iconData[].height - icon的高度
*
*/
function canvasDraw(option){
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
clientWidth = document.documentElement.clientWidth,
canvasHeight = 0,
distance = 0,
photoCount = 0,
iconCount = 0;
// canvas中手機(jī)上一倍繪圖會(huì)模糊,需采用兩倍,pc端不會(huì)。
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)
// 繪制圖片文字
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));
})
}
//按比例計(jì)算不同手機(jī)的百分比間距
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.iconData[iconCount].top), calculate(option.iconData[iconCount].width), calculate(option.iconData[iconCount].height))
iconCount++;
if (iconCount == option.iconData.length) {
var imageURL = canvas.toDataURL("image/jpeg")
document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL)
//將閉包引用清除,釋放內(nèi)存;
drawPhoto = null;
}else{
drawIcon('icon' + iconCount)
}
}
}
}else{
drawPhoto('photo'+ photoCount)
}
}
}
}else{
console.log('不支持canvas')
}
}
以上就是關(guān)于“怎么通過html5實(shí)現(xiàn)拼圖功能效果”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。