<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成你的祝福</title>
<script src="js/rem.js"></script>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<section class="editMain">
<img id="createBg" class="createBg" src="./images/canvasImg.png" alt="">
<section class="textBox">
<p>亲爱的孩子</p>
<textarea class="conText" placeholder="" rows="5" autofocus="true" onscroll="onscrollText()"></textarea>
<b class="guangbiao"></b>
</section>
<span class="tips" >信纸已经被您的祝福填满了～</span>
<input class="name" type="text" placeholder="你的签名" autofocus="autofocus">
<span class="createBtn"><img src="./images/createBtn.png" alt=""></span>
<!--画布-->
<canvas id="main" height="667" width="375" style="border:1px solid #d3d3d3;"></canvas>
</section>
<section class="saveImg"></section>
<canvas id="main1" height="1334" width="750" style="border:1px solid #d3d3d3;display: none"></canvas>
<img class="saveImg" src="./images/saveImg.png" alt="" style="display: none;">
<section class="masklayer2" style="scroll:auto;">
<img class="create" src="" height="250" width="543"/>
</section>
<section class="masklayer">
<img class="save" src="images/mask.png" height="250" width="543"/>
<img class="share" src="images/mask2.png" height="250" width="543"/>
</section>
</body>
<script src="./js/jquery.min.js"></script>
<script>
$(function(){
window.setInterval(function () {
$('.guangbiao').toggle(50);
},500);
$('.conText').focus();
document.querySelector('textarea').setAttribute('placeholder','写下\n 你对孩子的期待...');
var widthC = $('.createBg').css('width');
var heightC = $('.createBg').css('height');
document.getElementById('main').width = parseInt(widthC);
document.getElementById('main').height = parseInt(heightC);
$('.createBtn').on('touchstart','',function () {
$(this).find('img').css({
transform:'scale(0.95)'
})
}).on('touchend','',function(e){
$(this).find('img').css({
transform:'scale(1)'
})
$('.guangbiao').hide();
var value=$('.conText').val();
var youName = $('.name').val();
if(!value){
$('.masklayer,.masklayer .save').show();
setTimeout(function(){
$('.masklayer,.masklayer .save').hide();
$('.conText').focus();
},2000)
return false;
};
if(!youName){
$('.masklayer,.masklayer .save').show();
setTimeout(function(){
$('.masklayer,.masklayer .save').hide();
$('.name').focus();
},2000)
return false;
};
$('.conText,.name').blur();
createCanvas();
return false;
});
$(document).click(function(){
$('.guangbiao').remove();
}).on('touchend','.masklayer',function(){
$(this).hide();
});
})
function onscrollText() {
var text_array=$('.conText').val().split("\n");
//新建一个数组，防止textarea自动换行导致filltext绘制文字溢出的问题
var arr = [];
$.each(text_array,function(i,v){
console.log(v)
if(v.length >12){
//向上取整
var len = Math.ceil(v.length/12);
for(var j = 0;j<len;j++ ){
var newStr = v.substring(j*12,(j+1)*12)
arr.push(newStr);
}
}else{
arr.push(v);
}
})
var newArr = [];
if(arr.length > 7){
$('.tips').show();
setTimeout(function(){
$('.tips').hide();
},3000)
for(var i = 0; i<7 ; i++){
newArr.push(arr[i]);
}
var str = '';
$.each(newArr,function(i,v){
str+=v+'\n';
});
$('.conText').val(str);
}else{
$('.tips').hide();
}
}
function createCanvas(){
//获取画布对象
var canvasMain = document.getElementById('main1');
var mainCtx = canvasMain.getContext("2d");
var maxWidth = mainCtx.width;
var maxHeight = mainCtx.height;
mainCtx.clearRect(0,0,1000,1000);
//获取图片的实际路径
var starImg = new Image();
starImg.src='./images/saveImg.png';
//合成
starImg.onload=function(){
var drawImageWidth = 750;
var drawImageHeight = 1334;
//先把图片绘制在这里
mainCtx.drawImage(starImg,0,0,750,1334);
var value=$('.conText').val();
var youName = $('.name').val();
//读取用户的文本
if(value){
//设置用户文本的大小字体等属性
mainCtx.font = "small-caps bold 32px STXinwei";
//设置用户文本填充颜色
mainCtx.fillStyle = "#161616";
//绘制文字
var text_array=value.split("\n");
//新建一个数组，防止textarea自动换行导致filltext绘制文字溢出的问题
var arr = ['亲爱的孩子'];
$.each(text_array,function(i,v){
console.log(v)
if(v.length >12){
//向上取整
var len = Math.ceil(v.length/12);
for(var j = 0;j<len;j++ ){
var newStr = v.substring(j*12,(j+1)*12)
arr.push(newStr);
}
}else{
arr.push(v);
}
})
$.each(arr,function(i,v){
mainCtx.fillText(v,drawImageWidth/6.52,drawImageHeight/2.55 + 55*i);
})
//设置时间文本的大小字体属性
mainCtx.font = "small-caps bold 32px STXinwei";
//绘制时间
mainCtx.fillText(youName,drawImageWidth/2.3,drawImageHeight/1.36);
setTimeout(function(){
saveImageInfo();
},100);
}
};
};
//通过id获取canvas对象
function getCanvasContext(id){
return document.getElementById(id).getContext("2d");
};
//将画布生成图片
function saveImageInfo() {
var mycanvas = document.getElementById("main1");
var image = mycanvas.toDataURL("image/jpg");
$('.masklayer2 .create').attr('src',image);
$('.masklayer2 .create').animate({
width: "100%",
margin:'0 auto'
},1900)
$('.masklayer2,.masklayer2 .create').show();
setTimeout(function(){
$('.masklayer2,.masklayer2 .create').hide();
$('.saveImg').html("<img class='imgShow' src='"+image+"' alt='from canvas'/>");
$('.masklayer,.masklayer .share').fadeIn();
$('.editMain').fadeOut();
setTimeout(function(){
$('.masklayer,.masklayer .share').fadeOut();
},4000);
},2000)
};
</script>
</html>
code20180530.rar （36个子文件） 
code20180530 css 
reset.css 2KB main.css 5KB
edit.html 8KB images 
mainBg.png 187KB editBg.png 69KB canvasImg.png 124KB saveImg.png 75KB mask.png 13KB editBtn.png 7KB mask2.png 10KB saveBtn.png 4KB createBtn.png 4KB index.html 814B js jquery.min.js 95KB rem.js 4KB .idea code20180530.iml 458B modules.xml 276B workspace.xml 12KB inspectionProfiles code20180530 css reset.css 2KB main.css 5KB edit.html 8KB images mainBg.png 187KB editBg.png 69KB canvasImg.png 124KB saveImg.png 75KB mask.png 13KB editBtn.png 7KB mask2.png 10KB saveBtn.png 4KB createBtn.png 4KB index.html 814B js jquery.min.js 95KB rem.js 4KB .idea code20180530.iml 458B modules.xml 276B workspace.xml 10KB inspectionProfiles 资源评论
webrain-dfy
- 粉丝: 0
- 资源: 3
最新资源
- (源码)基于ESP32和AWS IoT Core的室内温湿度监测系统.zip
- (源码)基于Arduino的I2C协议交通灯模拟系统.zip
- coco.names 文件
- (源码)基于Spring Boot和Vue的房屋租赁管理系统.zip
- (源码)基于Android的饭店点菜系统.zip
- (源码)基于Android平台的权限管理系统.zip
- (源码)基于CC++和wxWidgets框架的LEGO模型火车控制系统.zip
- (源码)基于C语言的操作系统实验项目.zip
- (源码)基于C++的分布式设备配置文件管理系统.zip
- (源码)基于ESP8266和Arduino的HomeMatic水表读数系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
