canvas文字随机排列

Html

Css

body {
	margin:0;
	padding:0;
	color:#333333;
	font-family:"黑体",Lucida Grande,Verdana,Lucida,Arial,Helvetica,sans-serif;
	font-size:20px;
	text-align:left;
	background:#ecf0f4;
}
/*优秀项目*/
.yuxiu_xianm {
	width:1200px;
	margin:0px auto;
	background:#fff;
	-moz-box-shadow:2px 3px 5px #eaeef2,-2px -3px 5px #eaeef2;
	-webkit-box-shadow:2px 3px 5px #eaeef2,-2px -3px 5px #eaeef2;
	box-shadow:2px 3px 5px #eaeef2,-2px -3px 5px #eaeef2;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	position:relative;
	margin-top:30px;
	height:450px;
	overflow:hidden
}

var page = []
var datename = []
datename.push(
    "从工资单到朋友圈，看这十年改革开放之变;http://www.*******.com/",
    "网约车抽成将一目了然!官方督促平台公开计价规则;http://www.*******.com/",
    "甘肃省委原常委宋亮受贿案一审开庭：被控受贿7968万余元;http://www.*******.com/",
    "苏州：“全电共享”模块化租赁助力抗疫设施快速接电;http://www.*******.com/",
    "国防部：“台独”挑衅一日不止 解放军行动一刻不停;http://www.*******.com/",
    "杠精大姐横穿马路回怼交警33次：我给你下跪可好;http://www.*******.com/",
    "“蟹步”不是“莎皇”独门绝技 这名中国“05后”早就能做;http://www.*******.com/",
    "杭州一打印店卖“亮墩墩”被查，老板：灯是正版的！;http://www.*******.com/",
    "网红李赛高否认参与诈骗:仍在学校读书,已接受云南警方调查;http://www.*******.com/",
    "石景山将建净德寺遗址公园，邀市民体验“花海中的;http://www.*******.com/",
   "《镜双城》口碑扑街是李易峰失灵？“仙侠剧大年”出..;http://www.*******.com/",
   "刘德华宁浩时隔16年再合作，《红毯先生》上演过气男..;http://www.*******.com/",
    "回不了家的”欧联杯冠军：顿涅茨克矿工足球队 8;http://www.*******.com/",
    "一觉醒来，“中国完美兑现承诺”火了，王毅这番话值得..;http://www.*******.com/",
    "柯洁农心杯不敌申真?后感叹：这还是人类吗？;http://www.*******.com/",
   "真没想到，浙江竟然是南方户外滑雪顶流，为啥？;http://www.*******.com/",
    "禹城化工产业园吹响项目建设“冲锋号”;http://www.*******.com/",
   "新年开新局！高淳今年重点产业项目计划出炉→;http://www.*******.com/",
    "零售变革新突破 吉林银行储蓄存款迈上新台阶;http://www.*******.com/",
    "3月起新增个人经营收款码，卖菜商贩、小商铺受影响吗..;http://www.*******.com/",
   "锂电池板块今涨1.18% 吉翔股份涨9.99%居首;http://www.*******.com/",

)
var data2 = {}
for (var a = 0; a < datename.length; a++) {
    data2[a] = datename[a]

}

var drawImg = {
    canvasDom: null,
    data: [], //数据
    links: [],
    ctx: null, //花边
    retHref: null,
    finImgData: null, //最终图片
    finImgMsg: null, //存放是否已写信息
    colorArr: [ //颜色选择
        '#ff7466',
        '#10a6ea',
        '#f4b610',
        '#0c9bad',
        '#af2fcc',
    ],
    ready: function(data, containerId) {

this.data = data;

this.canvasDom = document.createElement("canvas");
        this.canvasDom.setAttribute("width", 1200);
        this.canvasDom.setAttribute("height", 410);
        //this.canvasDom.style.backgroundColor  = '#ccc';
        var containerDom = document.getElementById(containerId);
        containerDom.appendChild(this.canvasDom);
        this.ctx = this.canvasDom.getContext('2d');
        this.finImgData = this.ctx.createImageData(1200, 410);

//鼠标事件
        this.canvasDom.addEventListener("mousemove", on_mousemove, false);
        this.canvasDom.addEventListener("click", on_click, false);
        this.finImgMsg = [];

for (var i = 0; i < 1200; i++) {
            this.finImgMsg[i] = [];
            for (var j = 0; j < 410; j++) {
                this.finImgMsg[i][j] = 0;
            }
        }
        this.cavulateData();
        this.draw();
    },
    /**
     * 计算标签大小
     */
    cavulateData: function() {
        var dataArr = [];
        var obj;

for (var name in this.data) {
            dataArr.push({
                name: this.data[name],
                count: name
            })
        }
        dataArr.sort(function(x, y) {
            if (Math.floor(x.count) == Math.floor(y.count)) {
                return 0;
            }
            if (Math.floor(x.count) > Math.floor(y.count)) {
                return -1;
            } else {
                return 1;
            }
        })
        var shift = -6;
        for (var i = 0; i < dataArr.length; i++) {
            if (i == 0) {
                dataArr[0].count = 40; //字体大小
                continue;
            }
            if (shift < 0) {
                shift++
            }

dataArr[i].count = Math.floor(dataArr[i - 1].count * 99 / 100) + shift;
            if (dataArr[i].count < 13) {
                dataArr[i].count = 17;
            }
        }
        this.data = dataArr;
    },
    /**
     * 开始画
     */
    draw: function() {
        for (var i = 0; i < this.data.length; i++) {

var strname = this.data[i].name

var retNmme = strname.split(";")[0];
            this.retHref = strname.split(";")[1];

this.drawWord(retNmme.substring(0, 10), this.data[i].count, this.retHref);
        }
        this.ctx.putImageData(this.finImgData, 0, 0);

},
    /**
     * 单一一个标签画
     */
    drawWord: function(word, size, retHref) {
        //console.log(retHref)
        var fillStyle = this.colorArr[random(this.colorArr.length - 1)];
        this.ctx.fillStyle = fillStyle;
        this.ctx.font = "600 " + size + "px   微软雅黑";
        var w = this.ctx.measureText(word).width;

this.ctx.textBaseline = "top";
        this.ctx.fillText(word, 0, 5);
        var wordImgData = this.ctx.getImageData(0, 0, w, size + 10);
        wordImgData = this.randomRotateImgeData(wordImgData)
        this.ctx.clearRect(0, 0, 1200, 410);
        //初始化查找点
        var centerPoint = this.getCenterPoint();
        var i = 0;
        while (i < 1000) {
            if (centerPoint.isFullRound()) {
                centerPoint.clearRound();
            }
            var pos = centerPoint.getCenterPos(wordImgData.width, wordImgData.height);
            //console.log(pos)
            //距左边的距离
            pos.x = 1200 / 2 + pos.x;
            //距顶部的距离
            pos.y = 410 / 2 + pos.y;
            if (this.isAbleDraw(wordImgData, pos.x, pos.y)) {
                for (var i = 0; i < wordImgData.width; i++) {
                    for (var j = 0; j < wordImgData.height; j++) {
                        var point = getXY(wordImgData, i, j);
                        if (point[3] != 0) {
                            setXY(this.finImgData, pos.x + i, pos.y + j, point);
                            this.finImgMsg[pos.x + i - 1][pos.y + j - 1] = 1
                        }
                    }
                }
                break;
            }
            i++;
            centerPoint = this.getCenterPoint(centerPoint);
        }
        var Links = new Array();
        x = pos.x
        y = pos.y
        linkWidth = wordImgData.width
        linkHeight = wordImgData.height
        this.links.push(x + ";" + y + ";" + linkWidth + ";" + linkHeight + ";" + retHref);
        page = this.links
    },

/**
     * 是否可以画
     */
    isAbleDraw: function(wordImg, x, y) {
        //文字的宽和高
        var w = wordImg.width;
        var h = wordImg.height;
        for (var i = 0; i < w; i++) {
            for (var j = 0; j < h; j++) {
                var wordPoint = getXY(wordImg, i, j);
                //检测文字图片上该点是否有痕迹，不全为白为有痕迹
                if (wordPoint[3] != 0) {
                    var finx = x + i - 1;
                    var finy = y + j - 1;
                    if (finx < 0 || finx >= 1200 || finy < 0 || finy >= 410) {
                        return false;
                    }

if (this.finImgMsg[finx][finy] == 1) {
                        return false;
                    }
                }
            }
        }
        return true;
    },
    /**
     * 随机旋转
     */
    randomRotateImgeData: function(imgData) {
        var newImageData = this.ctx.createImageData(imgData.height, imgData.width);
        if (random(9) > 6) {
            for (var i = 0; i < imgData.height; i++) {
                for (var j = 0; j < imgData.width; j++) {
                    var point = getXY(imgData, j, i);
                    setXY(newImageData, imgData.height - i - 1, j, point);
                }
            }
            imgData = newImageData;
        }
        return imgData;
    },

/**
     * 用于标签的位置选择
     */
    getCenterPoint: function(centerPoint) {
        //没有传入centerPoint,默认初始化
        if (typeof centerPoint != 'object') {
            //centerPoint对象，用于存储以往已经选择的点的信息
            var centerPoint = {
                round: 1, //第几圈
                choose: [], //已选择的点
                nowChoose: null,
                revert: 0,
                /**
                 * 随机选择点
                 */
                randPoint: function() {
                    var chooseCount = this.round == 1 ? 1 : this.round * 2 + (this.round - 2) * 2; //总共可以选择的点
                    //所有情况已经遍历了，增加一环 ,重置
                    if (this.choose.length == chooseCount) {
                        this.round++;
                        this.choose = [];
                        this.revert = 0;
                        return this.randPoint();
                    }
                    while (true) {
                        this.nowChoose = random(chooseCount - 1);
                        if (!inArray(this.nowChoose, this.choose)) {
                            this.choose.push(this.nowChoose);

break;
                        }
                    }
                    return this.nowChoose;
                },
                getCenterPos: function(w, h) {
                    var shift = 0.5; //偏移率
                    var shiftw = random(1) ? random(w * shift) : -random(w * shift);
                    var shifth = random(1) ? random(h * shift) : -random(h * shift);
                    var pos = {
                        x: 0,
                        y: 0
                    }
                    if (this.nowChoose === null) {
                        return false;
                    }
                    if (this.round != 1) {
                        //第几象限
                        var quadrant = Math.floor((this.nowChoose) / (this.round - 1));
                        var distance = (this.nowChoose + 1) % this.round; //象限的偏移
                        //log(quadrant)
                        switch (quadrant) {
                            case 0:
                                pos.x = w / 2 * distance;
                                pos.y = h / 2 * (this.round - distance);
                                break;
                            case 1:
                                pos.x = w / 2 * (this.round - distance);
                                pos.y = h / 2 * (-distance);
                                break;
                            case 2:
                                pos.x = w / 2 * (-distance);
                                pos.y = h / 2 * -(this.round - distance);
                                break;
                            case 3:
                                pos.x = w / 2 * -(this.round - distance);
                                pos.y = h / 2 * distance;;
                                break;
                        }
                    }
                    pos.x += shiftw;
                    pos.y += shifth;

pos.x = Math.floor(pos.x - w / 2)
                    pos.y = Math.floor(pos.y - h / 2)
                    return pos;
                },
                isFullRound: function() {
                    if (this.revert) return false;
                    var chooseCount = this.round == 1 ? 1 : this.round * 2 + (this.round - 2) * 2; //总共可以选择的点
                    return this.choose.length == chooseCount;
                },
                clearRound: function() {
                    this.choose = [];
                    this.revert = 1;
                }
            };
        }
        centerPoint.randPoint();
        return centerPoint;
    }
}
window.onload = function() {
    drawImg.ready(data2, 'img');

}

function on_mousemove(ev) {
    var x, y;
    // 获取鼠标相对于画布元素的位置
    if (ev.layerX || ev.layerX == 0) {
        //鼠标的位置
        x = ev.layerX;
        y = ev.layerY;
    }
    //console.log(y)
    // 链接悬停
    for (var i = page.length - 1; i >= 0; i--) {

var params = new Array();

// 从数组中获取链接参数

params = page[i].split(";");

var linkX = parseInt(params[0]),

linkY = parseInt(params[1]),

linkWidth = parseInt(params[2]),

linkHeight = parseInt(params[3]),

linkHref = params[4];
        // 检查光标是否在链接区域
        if (x >= linkX && x <= (linkX + linkWidth) && y >= linkY && y <= (linkY + linkHeight)) {

document.body.style.cursor = "pointer"; //改变光标

hoverLink = linkHref;

break;

} else {

document.body.style.cursor = "";

hoverLink = "";

}
    }
}

//点击
function on_click(e) {
    if (hoverLink) {

window.location = hoverLink; // Use this to open in current window
    }
}

function random(num) {
    return Math.floor(Math.random() * (num + 1));
}

function log(str) {
    console.log(str);
}

/**
 * imgData根据坐标获取
 */
function getXY(imgData, x, y) {
    var res = [];
    var w = imgData.width;
    var h = imgData.height;

var pos = (y * w + x) * 4;

res[0] = imgData.data[pos];
    res[1] = imgData.data[pos + 1];
    res[2] = imgData.data[pos + 2];
    res[3] = imgData.data[pos + 3];
    return res;
}
/**
 * imgData根据坐标修改
 */
function setXY(imgData, x, y, res) {
    var w = imgData.width;
    var h = imgData.height;

var pos = (y * w + x) * 4;

imgData.data[pos] = res[0];
    imgData.data[pos + 1] = res[1];
    imgData.data[pos + 2] = res[2];
    imgData.data[pos + 3] = res[3];
}

/**
 *将重心坐标改成边缘坐标
 * 适用于x和y轴
 */
function center2abs(center, w, pos) {
    return center - Math.floor(w / 2) + pos;
}

function inArray(son, arr) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == son) {
            return true;
        }
    }
    return false;
}

function changeImg() {
    var containerDom = document.getElementById("img");
    containerDom.innerHTML = '';

drawImg.ready(data2, "img");
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

canvas文字随机排列



代码描述：canvas文字随机排列代码

更新时间：2022-02-28 02:19:59
cavas 实现文字每次刷新随机排列

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

sprite

相关代码

canvas文字随机排列

最新