Canvas tutorial: puzzle, combine images, draw circular images, add QR code logo, add text

1. Create a canvas object

 

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

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

 

 

2, set the size and initialize the context

 

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

 

3. Add text on canvas. If there is an image, add text at the end to avoid being overwritten

 

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

 

4. Add a background image

 

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

  // After the background image is loaded, draw it to the canvas
  ctx.drawImage(img, 0, 0, width, height);
}

 

5. Add a QR code image, that is, a group image

 

// 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');

// Draw the QR code image to the canvas
ctx.drawImage(img, 0, 0, width, height);

 

6. The logo is superimposed and added to the QR code to form a picture

 

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

  // After the background image is loaded, draw it to the canvas
  ctx.drawImage(img, 0, 0, width, height);
}

 

7. Draw a circular logo image

 

ctx.save(); // save the current state of ctx
ctx.arc(x+a/2, y+a/2, a/2, 0, 2 * Math.PI); //Draw a circle
ctx.clip();
ctx.drawImage(img, x, y, a, b); // draw on the garden just cropped
ctx.restore(); // restore state

 

 

 

 

8. The presentation form of the final renderings: