个人网站怎么做的模板,营销网站建设套餐,义乌论坛网站建设,网页制作软件有哪些1.前言
写了很多的javascript和css3的文章#xff0c;是时候写一篇canvas的了。canvas是html5提供的一个新的功能#xff01;至于作用#xff0c;就是一个画布。然后画笔就是javascript。canvas的用途非常的广#xff0c;特别是html5游戏以及数据可视化这两个方面。现在can…1.前言
写了很多的javascript和css3的文章是时候写一篇canvas的了。canvas是html5提供的一个新的功能至于作用就是一个画布。然后画笔就是javascript。canvas的用途非常的广特别是html5游戏以及数据可视化这两个方面。现在canvas给我的感觉就和css3一样可以不用太厉害但是必须要会基础的用法。但是以后对canvas的需求肯定会越来越大。所以canvas很值得学习而且学好canvas就是很好的一个加分项。对于这篇文章我也是以canvas初学者的角度写的会有很多改善的地方。如果大家觉得我有什么可以改善的或者建议欢迎指点迷津代码已上传github需要的欢迎star(downloadImg)。
大家看这篇文章之前要了解javascript的一些基础也要看着了解一些canvas的apicanvas-MSN教程canvas菜鸟教程2.邀请卡实例
邀请卡自动生成这个会有的毕竟有时候很多邀请卡都是一样的就是被邀请的人不一样而已也就是说整个邀请卡就是一个名字不一样那么下面。就写一套代码根据名字生成邀请卡
2-1.运行效果html代码
html
headmeta charsetutf-8title下载图片/titlestyle.set-option {float: left;width: 400px;}.set-option .text {width: 200px;height: 40px;padding-left: 10px;border-radius: 4px;border: 1px solid #ccc;}.set-option td {padding: 10px 0;}.set-option td:first-child {text-align: right;padding-right: 10px;}.set-option p {margin: 0;line-height: 16px;}.check-box {width: 16px;height: 16px;margin: 0;vertical-align: top;}button {width: 200px;height: 50px;border: none;color: #fff;font-size: 16px;cursor: pointer;display: block;margin: 10px auto;}button:hover {opacity: .9;}.btn-all {background: #f90;}.btn-save {background: #09f;}.btn-download {background: #4CAF50;}/style
/head
body
divdiv classset-optiontabletrtd画布尺寸/tdtdinput typetext classtext idsize//td/trtrtd背景图片/tdtdinput typefile idfile//td/trtrtd用户名/tdtdinput typetext classtext iduser-name//td/trtrtd用户名x坐标/tdtdinput typenumber classtext idtext-option-x//brpinput typecheckbox classcheck-box value1 idis-center-x居中显示/p/td/trtrtd用户名y坐标/tdtdinput typenumber classtext idtext-option-y//brpinput typecheckbox classcheck-box value1 idis-center-y居中显示/p/td/trtrtd用户名字体大小/tdtdinput typenumber classtext idtext-size//td/trtrtd文字颜色/tdtdinput typetext classtext idtext-color//td/trtrtd图片类型/tdtdselect typetext classtext idimg-typeoption valuejpgjpg/optionoption valuepngpng/option/select/td/tr/tablebutton idsave-image classbtn-save效果预览/buttonbutton iddownload-img classbtn-download下载当前图片/buttonbutton iddownload-all classbtn-all批量导出/button/divdiv classshow-canvascanvas width200 height200 idthecanvas/canvas/div
/div
/body
/html
效果如图那么大家细想一下关于一张邀请卡有什么东西是需要改变的看到上图相比不难发现有如下需要改变的属性图片的大小图片用户名用户名的坐标x,y,x轴是否居中y轴是否居中用户名字体的大小用户名字体的颜色以及下载图片的类型。
这样就得到了如下的参数大家看到有些参数是有值的可以想成默认值就行了
var option {img: 111.jpg,width: 500,height: 350,fontSize: 20px Microsoft YaHei,color: black,text: 守候,imgType: jpg,x: 30,y: 30,xCenter: false,yCenter: false,
};
2-2.步骤
1.初步效果
根据上面的参数先初步画一个效果代码基本都是一个写法没什么技巧
//画图
function draw(obj) {var canvas document.getElementById(thecanvas);//画布大小canvas.width obj.width;canvas.height obj.height;//设置图片var img new Image();img.src obj.img;var ctx canvas.getContext(2d);//设置字体的坐标var _x obj.x, _y obj.y;//是否居中显示if (obj.xCenter) {_x obj.width / 2;}if (obj.yCenter) {_y obj.height / 2;}//图片加载后img.onload function () {//先画图片ctx.drawImage(img, 0, 0);//设置文字的大小ctx.font obj.fontSize;//设置文字的颜色ctx.fillStyle obj.color;//设置文字坐标if (obj.xCenter) {ctx.textAlign center;}//画文字ctx.fillText(obj.text, _x, _y);};
}window.onload function () {draw(option);
}2.动态改变参数
看到图已经画好了工作其实已经完成一半了
下面就是动态改变参数这一步其实很简单。首先改变画布的尺寸
//画布尺寸
//获取按钮
var size document.getElementById(size);
size.addEventListener(blur, function () {//根据空格区分高宽var _width parseInt(size.value.replace(/(^\s*)|(\s*$)/g, ).split(/\s /)[0]),_height parseInt(size.value.replace(/(^\s*)|(\s*$)/g, ).split(/\s /)[1]);//把参数的width和height改掉option.width _width || 100;option.height _height || 100;//重新画图draw(option);
});
上面代码设置了只要输入框失去了焦点就会改变画布的大小下面来运行下看下效果gif图差强人意大家看懂就好canvas没有层级的说法只要改canvas都要重绘。哪怕就是一个字移动一个像素。做好了这个下面做选择图片的功能
//选择图片
//获取图片控件
var file document.getElementById(file), imagesFile, imageData;
file.addEventListener(change, function (e) {//获取图片imagesFile e.target.files[0];//把图片转base64var reader new FileReader();reader.readAsDataURL(imagesFile);//图片加载后reader.onload function (e) {//设置option的img属性再冲洗年绘制imageData this.result;option.img imageData;draw(option);}
});下面开始改文字用户名这个有点不一样我以空格分割。如果输入多个用户名以第一个用户名重绘。下面代码注释就不写了还是和上面的逻辑一样
//用户名
var userName document.getElementById(user-name);
userName.addEventListener(blur, function () {var _text userName.value.replace(/(^\s*)|(\s*$)/g, ).split(/\s /);option.text _text[0];draw(option);
});下面开始用户名的坐标代码方面也是改option的相关属性optionXCenter.addEventListener(change, function () {if (optionXCenter.checked) {option.xCenter true;}else {option.xCenter false;option.x parseInt(optionX.value);}draw(option);});//纵坐标var optionY document.getElementById(text-option-y);optionY.value option.y;var optionYCenter document.getElementById(is-center-y);optionY.addEventListener(input, function () {if (optionYCenter.checked) {option.yCenter true;}else {option.yCenter false;option.y parseInt(optionY.value);}draw(option);});//是否垂直居中显示optionYCenter.addEventListener(change, function () {if (optionYCenter.checked) {option.yCenter true;}else {option.yCenter false;option.y parseInt(optionY.value);}draw(option);});是否水平居中显示其他的属性字体大小和颜色基本是一样的代码运行的效果图我不放了
//字体颜色
var textColor document.getElementById(text-color);
textColor.addEventListener(blur, function () {textColor.value ? option.color #fff : option.color # textColor.value;draw(option);
});
//字体大小
var textSize document.getElementById(text-size);
textSize.addEventListener(input, function () {textSize.value ? option.fontSize 20px Microsoft YaHei : option.fontSize textSize.value px Microsoft YaHei;draw(option);
});3.按钮操作
效果预览
就是预览当前canvas的一个效果这个就很简单了就是新开一个窗口然后把图片写进去而已
//预览图片
function saveImageInfo() {var mycanvas document.getElementById(thecanvas);//生成图片var image mycanvas.toDataURL(image/png);var w window.open(about:blank, image from canvas);//把图片新进新的窗口w.document.write(img src image altfrom canvas/);
}
var saveButton document.getElementById(save-image);
saveButton.addEventListener(click, saveImageInfo);下载当前图片
下载图片这个基本也是写法的都是些记忆的东西
//图片类型
var imgType document.getElementById(img-type);
imgType.addEventListener(change,function () {option.imgTypethis.value;
});
//下载图片
function downloadImg(fileName) {//获取canvasvar myCanvas document.getElementById(thecanvas);//设置图片类型var image myCanvas.toDataURL(image/ option.imgType).replace(image/ option.imgType, image/octet-stream);var save_link document.createElementNS(http://www.w3.org/1999/xhtml, a);save_link.href image;//设置下载图片的名称save_link.download fileName . option.imgType;//下载图片var event document.createEvent(MouseEvents);event.initMouseEvent(click, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);
}批量下载图片
这个复杂一点但也不难下面一步一步来
1.首先批量导出那么用户名我这里是使用空格分割那么现在我在option里面弄一个字段textAll所有文字的集合。all代表是否是批量下载。fn属性代表回调函数
//批量导出
var downloadAll document.getElementById(download-all);
downloadAll.addEventListener(click, function () {var _text userName.value.replace(/(^\s*)|(\s*$)/g, ).split(/\s /);option.textAll _text;option.all true;option.fn downloadImg;draw(option);
});2.然后修改绘制的函数draw判断是否是全部绘制的情况
function draw(obj) {var canvas document.getElementById(thecanvas);//画布大小canvas.width obj.width;canvas.height obj.height;//设置图片var img new Image();img.src obj.img;var ctx canvas.getContext(2d);//设置字体的坐标var _x obj.x, _y obj.y;//是否居中显示if (obj.xCenter) {_x obj.width / 2;}if (obj.yCenter) {_y obj.height / 2;}//图片加载后img.onload function () {//是否是全部打印if(obj.all){//遍历textAllfor(var i0;iobj.textAll.length;i ){//绘制图片ctx.drawImage(img,0,0);//设置字体大小ctx.fontobj.fontSize;//设置字体颜色ctx.fillStyleobj.color;//是否居中显示if(obj.xCenter){ctx.textAligncenter;}//绘制文字ctx.fillText(obj.textAll[i], _x,_y);//是否回调if(obj.fn){obj.fn(obj.textAll[i]);}}//最后取消全部批量下载defult.allfalse;}else{ctx.drawImage(img,0,0);ctx.fontobj.fontSize;ctx.fillStyleobj.color;if(obj.xCenter){ctx.textAligncenter;}ctx.fillText(obj.text, _x,_y);}};
}3.小结
关于canvas入门的第一篇文章就写到这里了。写完之后也发现自己对canvas的也是有很多的不懂上文的这例子知识canvas很简单的一个入门实例。canvas如果深入学习能做到很多让人惊讶的效果这个得以后要加强学习如果发现些值得记录的知识我也会写文章。canvas是一个非常值得学习的知识也是很有趣的一个知识。期待与大家有更多的交流和学习-------------------------华丽的分割线--------------------想了解更多关注关注我的微信公众号守候书阁更多专业前端知识请上
【猿2048】www.mk2048.com
