canvas(文本)

清疚 2022-06-03 02:44 190阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		canvas{
    			background: #ddd;
    		}
    	</style>
    </head>
    <body>
    	<h3>canvas绘图 ——文本</h3>
    	<canvas id="c2" width="500" height="400">
    
    	<script>
    		var c2=document.getElementById('c2');
    		var ctx=c2.getContext('2d');
    		ctx.textBaseline="top";
    		var str="abcxyz";
    		ctx.font="30px SimHei";
    		ctx.fillText(str,0,0);
    	</script>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		canvas{
    			background: #ddd;
    		}
    	</style>
    </head>
    <body>
    	<canvas id="c2" width="500" height="400"></canvas>
    
    	<script>
    		var c2=document.getElementById('c2');
    		var ctx=c2.getContext('2d');
    		ctx.textBaseline="top";
    		var str="spf";
    		ctx.font="30px SimHei";
    		ctx.fillText(str,0,0);
    		var tWidth=ctx.measureText(str).width;
    		ctx.fillText(str,500-tWidth,0);
    		ctx.fillText(str,0,400-30);
    		ctx.fillText(str,500-tWidth,400-30);
    		ctx.fillText(str,250-tWidth/2,200-15);
    	</script>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		canvas{
    			background: #ddd;
    		}
    	</style>
    </head>
    <body>
    	<canvas id="c2" width="500" height="400"></canvas>
    
    	<script>
    		var c2=document.getElementById('c2');
    		var ctx=c2.getContext('2d');
    		ctx.textBaseline="top";
    		var str="spf";
    		var x=0;
    		var xDir=1;
    		ctx.font="30px SimHei";
    		ctx.fillText(str,x,0);
    		var tWidth=ctx.measureText(str).width;
    
    		setInterval(function(){
    			x += 5*xDir;
    			ctx.clearRect(0,0,500,400);
    			ctx.fillText(str,x,0);
    			if(x<0){
    				xDir=1;
    			}
    			if(x>(500-tWidth)){
    				xDir=-1;
    			}
    		},100);
    	</script>
    </body>
    </html>