导航

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

侧边栏
热门文章
1推文
酒店免费把我的双人床升级成了2张双人床!空间是大了许多,但是1个住有些浪费呀。
热度
544
2推文
飞猪说这一班飞机没有餐食,结果特意吃饱了上飞机,结果突然端出来量大管饱的飞机餐我都懵了。 这是一条来自高空的推文。
热度
402
3页面
程序员老黄历&求签
热度
312
4推文
抵达台北开始6天5夜的台湾之旅!
热度
219
5博文
《孤独摇滚》圣地巡礼——金泽八景
热度
117
6推文
《苍之彼方的四重奏 10th Anniversary Box》预计2025年3月28日发售,售价为含税19800日元(约922人民币)。 其中如果购买了sprite LIMITED EDITION或FILMIC EDITION版的话,还有机会将名字(猜测)登在结尾字幕中! sprite LIMITED EDITION版售价39800日元(约1853人民币),FILMIC EDITION版售价149800日元(约6973人民币)。 感觉如果花1853人民币就能把"维基萌"打在游戏结尾字幕中也似乎不错的样子?🤔 《苍之彼方的四重奏 10th Anniversary Box》专题页面:https://sprite.net/aokana/10thanniversary/box
热度
104
7博文
《孤独摇滚》圣地巡礼——下北泽&下北泽咖喱节2023
热度
91
8博文
探访《蜡笔小新》老家——春日部游记
热度
78
9推文
最新一集的《mono女孩》里的《摇曳露营△》彩蛋真的太多啦!
热度
65
10推文
今天去看了首部初音未来的电影《剧场版 世界计划 破碎的世界与无法歌唱的未来》。 说是初音未来的电影,但其实是手游《世界计划》的剧场版。好像有挺多人看到是初音未来的电影就去看了,结果发现并不全是😅。其实在宣传海报中,初音未来后面的那些人才是主角。 不过,我也是那些没玩过手游的观众之一。其实整场看下来问题也不是很大,就是对于人物关系和世界观的设定可能会有些问题。电影其实也很贴心地在剧情开头,大致以剧情的形式展示了手游中的五个团体的人物及其性格,但感觉还是有些杯水车薪,约等于看个眼熟。 此次的电影是第一次购买应援场。所谓的应援场,就是能在电影院里像是听演唱会一样挥舞荧光棒和尽情呐喊。看着前排那些粉丝看到自己喜欢角色时的呐喊,以及演唱会环节的打CALL,应援场确实是很有意思的一种电影观看方式呢! 剧情方面,属于看了开头大概能猜到整部动画的剧情走向。不过,通过演唱会的气氛渲染,甚至还感受到了一丝丝的感动。 总体来说,对于手游的粉丝来说可能是嘉年华般的狂喜,对于没接触过手游的路人来说也能一定程度融入其中,属于一部不错的粉丝向电影(不管是手游粉丝还是初音未来粉丝)。 首周电影特典是CD和游戏内的兑换码。送CD这种形式还第一次遇到,官方大气!
热度
65
最新评论
广树管理员
2025-04-29 22:48
@夕阳西下:哈哈哈,是这么操作的
夕阳西下
2025-04-29 22:46
一个睡觉,另外一个放衣服
广树管理员
2025-04-29 21:37
@Zrzzz:期待第四季的摇曳露营吧
广树管理员
2025-04-29 21:37
@mikusa:哈哈哈,确实有点出戏
广树管理员
2025-04-29 21:37
@ZeroCounter:是吗?真的被飞机的量吓到了。2块面包,1盒咖喱米饭,1碗沙拉,1碗水果,1杯茶,1杯水。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月6天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
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