导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
最新评论
广树管理员
2025-03-24 22:23
@粽叶加米:也不一定是根据知道的事实,感觉有时候就像人做梦一样创造了一个现实。
粽叶加米
2025-03-24 21:34
还是本质上的区别,一个是事实呈现,一个是根据知道的事实去编造。
广树管理员
2025-03-24 20:04
@MAO:好像网上有好多说法
广树管理员
2025-03-24 20:04
@Chise Hachiroku:呀,拍得双手都冻坏了
广树管理员
2025-03-24 20:03
@Jeffer.Z:现在最可怕的事情莫过于不断吹嘘AI有多厉害,却不怎么提及胡编乱造的缺点
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩1个月
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
界之轨迹
暂无评分
PS5界之轨迹
2024年9月28日 14时 ~ 攻略中
已累计游玩5个月27天
导力之父爱普斯泰因预言的世界末日即将到来,此时东大陆共和国所研发的导力火箭划破天空,即将探访这个世界的边界。 与此同时万事屋的青年们,正聚集在奥雷德自治州,与集结而来的各方势力,一同看望着这科技奇点。 人们这次是否能认识到世界的真实呢?
PSN奖杯卡

PSN奖杯卡

赞助商广告

熊猫记仇表情在线生成代码

作者:广树时间:2018-05-17 12:51:26分类:JavaScript

试着用Canvas做了时下比较流行的熊猫记仇


测试预览:


HTML:


<div class="jichou_body">
    <div><canvas id="jichou"></canvas></div>
    <div>
        <textarea class="jichou_textarea" placeholder="输入想要记录的字,单行超过显示限制记得回车换行" oninput="drawJichou(this)"></textarea>
    </div>
    <div><a href="javascript:;" id="saveCanvas">保存</button></a>
</div>


CSS:


.jichou_body{
        text-align: center;
}
.jichou_textarea{
        width: 416px;
        height: 216px;
}


JS:


var imgSrc = [
	"jichouimg.png"//记仇图片路径按需填写
]
var images = [];
 
function loading(){
	var imgLength = imgSrc.length;
	var loadingNum = 0;
	for(var i=0;i<imgLength;i++){
		images[i] = new Image();
		images[i].src = imgSrc[i];
		images[i].onload = function(){
			loadingNum++;
			if(loadingNum===imgLength){
				initImg();
			}
		}
	}
}
//以上读取图片
function initImg(){//初始化
    var c=document.getElementById("jichou");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#ffffff";
    ctx.fillRect(0,0,c.width,c.height);
    c.width = 416;//根据记仇图片宽度写
    c.height = 336;//根据记仇图片高度写
    ctx.drawImage(images[0],0,0);
    saveCanvas();
}
function drawJichou(obj){//绘制文字
    var c=document.getElementById("jichou");
    var ctx=c.getContext("2d");
    var inputText = obj.value;
    var textArr = inputText.split("\n");
    var h = 336;
    console.log(textArr);
    for(var i=0;i<textArr.length;i++){
        h = 336+12+24*i;
    }
    c.width = 416;
    c.height = h;
    ctx.fillStyle="#ffffff";
    ctx.fillRect(0,0,c.width,c.height);
    ctx.drawImage(images[0],0,0);
    for(var i=0;i<textArr.length;i++){
        ctx.fillStyle="#000000";
        ctx.font="16px SimSun";
        ctx.fillText(textArr[i],10,336+24*i);
    }
    saveCanvas();
} 
function saveCanvas(){//保存图片
    var canvas = document.getElementById("jichou");
    var image = canvas.toDataURL("image/png"); 
    var link = document.getElementById("saveCanvas");
    link.download = "记仇.png";
    link.href = image.replace("image/png", "image/octet-stream");
}
loading();


donate.png

1210 x 50(蓝底).png

cloudcone