console 命令行工具 X clear

console

function newImage(){
		
		var canvas = document.getElementById('canvas');
		var img = document.getElementById('img');
		
		canvas.width = 750;
		canvas.height = 1200;
		var canvasContext = canvas.getContext('2d');  
		
		var backgroundImage = new Image;
		var nameImage = new Image;
		
		var name = '李欣楠';
		
		backgroundImage.crossOrigin = "Anonymous";   //设置可以跨域请求图片
		backgroundImage.src = '//img10.360buyimg.com/imgzone/jfs/t1/119030/29/18663/442177/5f6d6759Ee0d2e70b/7a248041e291fcde.png';
		
		nameImage.crossOrigin = "Anonymous";
		
		 setTimeout(function(){
			 nameImage.src = '//img10.360buyimg.com/imgzone/jfs/t1/152412/31/727/123428/5f6d6758Eaa592100/e66574de1d7458ce.png';
			
		 },1000)
		 nameImage.onload = function(){  //图片异步时，等图片加载完成在执行下面
			 
			  canvasContext.drawImage(backgroundImage, 0, 0, 750, 1200);
			  canvasContext.drawImage(nameImage, 300, 200, 300, 400);
     
			  canvasContext.font = '100px bold 黑体';
			  canvasContext.fillStyle = 'red';
			  canvasContext.fillText(name, 100, 400, 110,20);
			  
			  canvasContext.font = '60px bold 黑体';
			  canvasContext.fillStyle = 'greenyellow';
			  canvasContext.fillText(name, 100, 600);     //设置多个文字时
			 	
			 var imgSrc = canvas.toDataURL("image/png")   //此方法把canvas生成的图片转成一张图的链接形式
			 img.src = imgSrc;
			 
			 
			 
		 }
		 
		
	}
	
	newImage()

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="display: none;">
			
		</canvas>
		<img src="" id='img' alt="">
	</body>
</html>