ctx.strokeStyle = "red";
ctx.moveTo(0,0);
ctx.lineTo(138,0);
ctx.lineTo(138,61);
ctx.lineTo(0,61);
ctx.closePath();
ctx.stroke();
ctx.rect()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像处理</title>
</head>
<script>
function drawAndShareImage() {
var canvas = document.createElement("canvas");
// canvas.width = 700;
// canvas.height = 700;
var context = canvas.getContext("2d");
// context.rect(0, 0, canvas.width, canvas.height);
// context.fillStyle = "#fff";
// context.fill();
var myImage = new Image();
myImage.src = "./1.jpg"; //背景图片 你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
myImage.onload = function () {
context.drawImage(myImage, 0, 0, 700, 700);
context.font = "60px Courier New";
context.fillText("我是文字", 350, 450);
var myImage2 = new Image();
myImage2.src = "./rx.jpg"; //你自己本地的图片或者在线图片
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function () {
context.drawImage(myImage2, 175, 175, 225, 225);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
var img = document.getElementById('avatar');
// document.getElementById('avatar').src = base64;
img.setAttribute('src', base64);
}
}
}
drawAndShareImage()
</script>
<body>
<img id="avatar" alt="">
<canvas id="canvas"></canvas>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/u/4396834/blog/4404646