canvas——rotate

秒速五厘米 2022-06-03 04:19 147阅读 0赞

<!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>
    		//canvas元素变形
    		var c2=document.getElementById('c2');
    		var ctx=c2.getContext('2d');
    		
    		var img=new Image();
    		img.src='img/canvas.jpg';
    		img.οnlοad=function(){
    			ctx.translate(250,200);
    			ctx.drawImage(img,0,0);
    		}
    		function xz(){
    			//绕圆点旋转
    			ctx.clearRect(0,0,500,400);
    			ctx.rotate(15*Math.PI/180);
    			ctx.drawImage(img,0,0);
    		}
    
    		setInterval("xz()",1000);
    
    		//或用这种方式实现
    		/*var timer=setInterval(function(){
    			...
    		},1000);*/
    	</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>
    		//canvas元素变形
    		var c2=document.getElementById('c2');
    		var ctx=c2.getContext('2d');
    		
    		var img=new Image();
    		img.src='img/canvas.jpg';
    		img.οnlοad=function(){
    			ctx.translate(250,200);
    			ctx.drawImage(img,-img.width/2,-50);
    		}
    		function xz(){
    			//绕自己的中心旋转
    			ctx.clearRect(0,0,500,400);
    			ctx.rotate(15*Math.PI/180);
    			ctx.drawImage(img,-img.width/2,-50);
    		}
    
    		setInterval("xz()",1000);
    
    		//或用这种方式实现
    		/*var timer=setInterval(function(){
    			...
    		},1000);*/
    	</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>
    		//canvas元素变形
    		var c2=document.getElementById('c2');
    		var ctx=c2.getContext('2d');
    		
    		var img=new Image();
    		img.src='img/canvas1.jpg';
    		img.οnlοad=function(){
    			ctx.translate(250,200);
    			ctx.drawImage(img,0,0);
    		}
    
    		deg1=0;
    		deg2=0;
    		function xz(){
    			//绕自己的中心旋转
    			ctx.clearRect(0,0,500,400);
    			console.log("xz");
    			ctx.save();
    			deg1+=15;
    			ctx.rotate(deg1*Math.PI/180);
    			ctx.drawImage(img,-50,-50);
    			ctx.restore();
    
    			deg2+=20;
    			ctx.save();
    			ctx.rotate(deg2*Math.PI/180);
    			ctx.drawImage(img,0,0);
    			ctx.restore();
    		}
    
    		setInterval("xz()",1000);
    
    		//或用这种方式实现
    		/*var timer=setInterval(function(){
    			...
    		},1000);*/
    	</script>
    </body>
    </html>

canvas——rotate

发表评论取消回复

还没有评论，来说两句吧...

相关阅读