canvas旋转，缩放，位移动画

最新推荐文章于 2024-12-05 16:17:37 发布

hb707934728

最新推荐文章于 2024-12-05 16:17:37 发布

阅读量3.5k

点赞数

分类专栏： Html5_学习笔记

本文链接：https://blog.csdn.net/hb707934728/article/details/70174494

版权

Html5_学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这篇博客深入探讨了HTML5 Canvas如何实现元素的旋转、缩放和平移动画效果。通过JavaScript控制，你可以创建动态且交互式的图形，包括对象的动态旋转、大小调整以及在画布上的自由移动。了解这些基本技巧对于提升网页的视觉体验至关重要。

摘要由CSDN通过智能技术生成

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	      <style>
        #canvas {
              -webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
              -moz-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
              box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
              border: 1px solid cornflowerblue;
              background: aqua;
        }
      </style>
   </head>

   <body>
      <canvas id="canvas" width="600" height="420">
         Canvas not supported
      </canvas>

      <script >
      	var canvas=document.getElementById('canvas'),
      	context=canvas.getContext('2d'),
      	text='点我啊',
      	angle=Math.PI/50,
      	clockwise=true,
      	fontHeight=128,
      	origin={},
      	paused=true,
      	scale=1.008;
      	
      	function drawText(){
      		context.fillText(text,0,0);
      		context.strokeText(text,0,0);
      	}
      	
      	canvas.οnclick=function(){
      		paused=!paused;
      		if(!paused){
      			clockwise=!clockwise;
      			scale=1/scale;
      		}
      	};
      	
      	setInterval(function(){
      		if(!paused){
      			context.clearRect(-origin.x,-origin.y,canvas.width,canvas.height);
      			
      			context.rotate(clockwise?angle:-angle);
      			context.scale(scale,scale);
      			
      			drawText();
      		}
      	},1000/60);
      	
      	context.font=fontHeight + 'px Palatino';
      	//填充色
      	context.fillStyle='cornflowerblue';
      	//边框色
      	context.strokeStyle='yellow';
      	
      	
      	//创建阴影颜色  
      	context.shadowColor='rgba(100,100,150,0.8)';
      	/**
      	 * shadowOffsetX 属性设置或返回形状与阴影的水平距离。
		   shadowOffsetX=0 指示阴影位于形状的正下方。
		   shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。
		   shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。
      	 */
      	context.shadowOffsetX=20;
      	/**
      	 * shadowOffsetY 属性设置或返回形状与阴影的垂直距离。
		   shadowOffsetY=0 指示阴影位于形状的正下方。
		   shadowOffsetY=20 指示阴影位于形状 top 位置下方的 20 像素处。
		   shadowOffsetY=-20 指示阴影位于形状 top 位置上方的 20 像素处。
      	 */
      	context.shadowOffsetY=20;
      	//shadowBlur 属性设置或返回阴影的模糊级数
      	context.shadowBlur=20;
      	
      	//设置或返回文本内容的当前对齐方式
      	context.textAlign='center';
      	//属性设置或返回在绘制文本时的当前文本基线
      	context.textBaseline='middle';
      	
      	origin.x=canvas.width/2;
      	origin.y=canvas.height/2;
      	
      	/**
      	 * context.transform(a,b,c,d,e,f);
      	 * 
      	 * transform(scaleX,skewX,skewY,scaleY,transX,transY);
      	 * 
      	 * 
      	 * 画布上的每个对象都拥有一个当前的变换矩阵。
		   transform() 方法替换当前的变换矩阵,
		     请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建
		   a	水平缩放绘图
		   b	水平倾斜绘图
		   c	垂直倾斜绘图
		   d	垂直缩放绘图
		   e	水平移动绘图
		   f	垂直移动绘图
      	 */
      	
      	/**
      	 * 图像的默认矩阵   (1,0,0,1,0,0)
      	 */
      	context.transform(1,0,0,1,origin.x,origin.y);
      	drawText();
      	
      </script>
   </body>
</html>

演示地址：http://sandbox.runjs.cn/show/v9dvdvwt