首页  »   Go

Canvas课程:拼图,组合图像,画圆形图像,添加二维码logo,添加文字

网友分享于:2018-04-03  浏览:1次
Canvas教程:拼图,组合图像,画圆形图像,添加二维码logo,添加文字

1,创建canvas对象

 

// method 1
document.createElement('canvas')

// method 2
<canvas id="canvas" />
document.getElementById('canvas')

 

 

2,设置大小并初始化上下文

 

canvas.width = 341;
canvas.height = 512;
var ctx = canvas.getContext('2d');

 

3,在canvas上面添加文字,若有图像,最后添加文字,避免被覆盖

 

ctx.font = 'bold 20px Arial';
ctx.fillStyle = '#058';
ctx.fillText('我爱你', 150, 180);
ctx.strokeStyle = 'rgba(255,255,255,0.4)';
ctx.strokeText('我爱你', 150, 180);

 

4,添加背景图像

 

var img = new Image();
img.src = 'bg.jpg';
img.onload = function() {
  var width = img.width / 2;
  var height = img.height / 2;

  // 背景图像加载后画到canvas画布上
  ctx.drawImage(img, 0, 0, width, height);
}

 

5,添加二维码图像即组图

 

// https://github.com/davidshimjs/qrcodejs
<div id="qrcode" style="display: none"></div>
new QRCode($('qrcode'), {
  text: 'http://qiaolevip.iteye.com',
  width: 128,
  height: 128,
  colorDark : '#000000',
  colorLight : '#ffffff',
  correctLevel : QRCode.CorrectLevel.H
});
var img = $('qrcode').querySelector('img');

// 二维码图像画到canvas画布上
ctx.drawImage(img, 0, 0, width, height);

 

6,logo叠加添加到二维码上面即组图

 

var img = new Image();
img.src = 'logo.jpg';
img.onload = function() {
  var width = img.width / 2;
  var height = img.height / 2;

  // 背景图像加载后画到canvas画布上
  ctx.drawImage(img, 0, 0, width, height);
}

 

7,绘制圆形logo图像

 

ctx.save(); // 保存当前ctx的状态
ctx.arc(x+a/2, y+a/2, a/2, 0, 2 * Math.PI); //画出圆
ctx.clip();
ctx.drawImage(img, x, y, a, b); // 在刚刚裁剪的园上画图
ctx.restore(); // 还原状态

 

 

 

 

8,最终效果图呈现形式:

 

 

 

 

 

 

 

相关解决方案

最新解决方案