导航

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

侧边栏
最新评论
广树管理员
2025-05-07 21:00
@ZeroCounter:哈哈哈,被发现啦
ZeroCounter
2025-05-07 14:06
原来博主是可爱的二次元女孩子(→游船上那张全景
广树管理员
2025-05-06 14:31
@ZeroCounter:这样啊,逐渐听不懂现在的网络热梗了😅
ZeroCounter
2025-05-06 13:41
@广树:一个梗啦,表示很无语( 因为国内的阅读理解题经常写表达了作者的思乡之情(
广树管理员
2025-05-06 11:13
@ModerRAS:云台拍摄全景需要固定不动,时间也长,有一定场景限制。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月15天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
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