利用canvas绘制电子证书

<canvas>标签是HTML中的一个图形容器，其实你也可以把它理解成为一个程序员的画图工具，它只要提供的是2D绘制功能。我们可以通过利用JavaScript 来控制它绘制各种文本和图像。

下面我们通过一个绘制电子证书的例子来了解一下这个canvas究竟是个什么东西。

首先，我们需要自己在网上找一张证书的图片。

然后，新建一个project，在body中写一个<canvas>标签并且设置其相应的属性。

<pre><canvas style="background-color: #fff;" id="myCanVas" width="600" height="865">不好意思！！您的浏览器不支持canvas标签</canvas>
</pre>

根据证书的需求执行添加控件，我这里添加了3个控件。分别是：姓名、证书内容、日期。

<pre>
<input type="text" placeholder="请输入姓名" id="text" >
请输入相关文字:
<input type="text" id="prize">
请输入日期：
<input type="date" id="day">
<input type="button" value="点击获取" id="submit">
</pre>

上面我们就完成了3个控件，这些控件就是用来添加我所需要的姓名、证书内容、日期的。

说了这么多我们好像还没把证书背景加载进入canvas标签中，那么下面我们就用JavaScript将图片加载进去。

var can = document.getElementById("myCanVas");
var myCan = can.getContext("2d");
var img = new Image();
img.src = "img/bg.jpg";
img.onload = function() {
myCan.drawImage(img, 0, 0);
}

证书背景也有啦！我们现在就要把我们输入的姓名、证书内容、日期等信息获取到。

var txt = document.getElementById("text");
var pr = document.getElementById("prize");
var da = document.getElementById("day");
var but = document.getElementById("submit");
but.onclick = function() {
myCan.beginPath();
myCan.font = "22px Arial";
myCan.fillText(txt.value, 140, 390);
drawText(pr.value, 128, 410, 358);
myCan.fillText(da.value, 380, 660);
myCan.closePath();
}

由于canvas文字默认没有换行的，需要自己设偏移量，所以直接获取证书内容无法满足我们证书开头要空两个格的需求。这里我用了个函数来配置偏移量。

function drawText(t, x, y, w) {var chr = t.split("");var temp = "";var row = [];var count = 0;myCan.font = "21px 宋体";for(var a = 0; a < chr.length; a++) {if(count == 0) {if(myCan.measureText(temp).width < w - 40) {;} else {count += 1;row.push(temp);temp = "";}temp += chr[a];} else {if(myCan.measureText(temp).width < w) {;} else {count += 1;row.push(temp);temp = "";}temp += chr[a];}}row.push(temp);for(var b = 0; b < row.length; b++) {myCan.fillText(row[b], b==0?x+40:x, y + (b + 1) * 30);}}

到这里就基本完成了，一本有权威机构认证的证书还需要一个章。我们可以自己通过软件制作一个然后转成png格式。下面是我自己做的一个印章。

我们也利用跟刚才加载证书背景一样的方法将图片进行加载就可以。

setTimeout(function() {var imgt = new Image();imgt.src = "img/seal.png";imgt.onload = function() {myCan.drawImage(imgt, 365, 540);}}, 100 /*设置100的延迟*/);

这样下来我们就完成了一整个制作过程了，我给大家看看一个效果图。只要输入姓名、证书内容、日期，然后点击获取即可生成一张属于自己的搞怪证书。这就是编码的魅力。

利用canvas绘制电子证书相关推荐

html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆发布时间:2021-07-08 16:32:10 来源:亿速云阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
小程序利用canvas 绘制图案（生成海报，生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
canvas线条背景(抽象画布可视化，利用canvas绘制多条线条，再利用多条线条同时动态发生改变，形成一幅美妙的动态图，非常惊艳！)
canvas线条背景(抽象画布可视化,利用canvas绘制多条线条,再利用多条线条同时动态发生改变,形成一幅美妙的动态图,非常惊艳!) 动态变化中的静态截图 <!doctype html> ...
vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
利用canvas绘制的拓扑动画效果
展示效果网址 reloadimage(callback){let imgArrs = [];this.imgArray.forEach((img,index,arrs)=>{imgArrs[in ...
用easyx画电子钟_Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
h5 canvas绘制电子数字时钟
使用h5的canvas实现绘制电子数字时钟,只支持数字,效果如下: <!DOCTYPE html> <html lang="en"> <head> ...

利用canvas绘制电子证书

利用canvas绘制电子证书

利用canvas绘制电子证书相关推荐

最新文章

热门文章