此片博客主要带大家学会什么呢, 想必大家以前一定见过类似这样的整蛊图片了把?
Paste_Image.png
其实实现它的方式有很多种. 例如PS等等. 但是呢, 作为一个程序员, 我们可以用代码更灵活的实现它. 那么我们就来学习一下canvas的使用吧!
canvas: 是HTML5新出的一个标签.主要提供2d绘制功能!
第一步:
准备一个你要用的整蛊的图片!类似于下面这样子. 可能你要会点ps, 把要添加上去的字给抹掉!
5.jpg
第二步:
找一个你认为用的顺手的开发工具, 打开它并且准备好图片和建一个HTML文件.
第三步:
创建一个canvas标签, 并且设置相应属性
<pre>
<canvas id="myCanVas" width="800" height="400">您的浏览器不支持canvas标签</canvas>
</pre>
再来2个控件, 一个输入名字, 一个输入日期的
<pre>
<br />
<input type="text" placeholder="请输入姓名" id="text"><br />
请选择日期:
<input type="date" id="day">
<br />
<input type="button" value="产生图片" id="submit">
</pre>
第四步:
上面HTML代码差不多了, 该来写我们JS代码了, 先把图片利用canvas加载出来吧, 代码如下:
<pre>
<script>
// 1. 获取canvas标签元素
var can = document.getElementById("myCanVas");
// 2. 获取画笔(也就是获取绘图环境)
var myCan = can.getContext("2d");
// 3. 加载图片
var img = new Image();
img.src = "5.jpg";
img.onload = function(){
myCan.drawImage(img, 0, 0);
}
</script>
</pre>
最后界面显示效果如下:
Paste_Image.png
好的, 下面该来干点什么事情了呢? 应该把输入的名字和日期 弄到图片上了把? 很简单. 看如下代码(PS:当然写在跟上面同一个script标签内哈)
<pre>
// 4. 获取用户输入的内容的dom元素和按钮元素
var txt = document.getElementById("text");
var da = document.getElementById("day");
var but = document.getElementById("submit");
but.onclick = function() {
// 开始绘制路径
myCan.beginPath();
// 5. 在图片上指定位置绘制文字
myCan.fillText(txt.value, 176, 120);
myCan.fillText(da.value, 176, 210);
// 结束绘制
myCan.closePath();
}
</pre>
到这里就ok了, 最后效果看下图:
1.gif
最后注意: 这里有个问题, 就是当你不断的点击产生图片的按钮的时候, 你会发现, 文字一直在往图片上绘制. 大家可以锻炼自己解决问题的能力, 这里提供一个思路:
当第二次点击产生图片按钮时, 利用myCan对象调用clearRect() 方法, 清除canvas标签区域, 然后重新绘制.
网友评论