canvas-变换

最新推荐文章于 2023-09-12 14:23:25 发布
最新推荐文章于 2023-09-12 14:23:25 发布
阅读量158 收藏
点赞数
分类专栏： canvas 文章标签： canvas javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44586981/article/details/119109882
版权

canvas中的变换

translate(x, y)
	我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。
	translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，
	在canvas中translate是累加的

rotate(angle)
	这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
	旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法
	
	在canvas中rotate是累加的
	
scale(x, y)
	scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。
	值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
	缩放一般我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
	
	在canvas中scale是累乘的

translate 平移的是canvas的原点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				/*ctx.translate(50,50);
				ctx.translate(50,50);*/
				ctx.translate(100,100)
				ctx.beginPath();
				ctx.fillRect(0,0,100,100);
			}
		}
		
		
	</script>
</html>

rotate 旋转canvas的坐标轴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
//				ctx.translate(50,50);
//				ctx.rotate(45*Math.PI/180)
				ctx.rotate(22.1*Math.PI/180)
				ctx.rotate(22.9*Math.PI/180)
				
				ctx.beginPath();
				ctx.fillRect(150,150,100,100);
			}
		}
		
		
	</script>
</html>

scale 缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
//				ctx.scale(2,2)
//				ctx.scale(2,2)
				
				/*
				css像素是一个抽象单位
					放大:
						使画布内css像素的个数变少，单个css像素所占据的实际物理尺寸变大
					缩小:
						使画布内css像素的个数变多，单个css像素所占据的实际物理尺寸变小
				* */
				
				
				ctx.beginPath();
				ctx.fillRect(50,50,100,100);
			}
		}
		
		
	</script>
</html>

​

时光无声￡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas translate()方法实例及效果
dayewandou的博客
10-14 1万+
canvas中很多的变换效果常用的就是translate()、rotate()和scale() 今天就来说一下translate() translate(x,y)方法重新映射画布上的 (0,0) 位置。也就是画布的平移 参数：x：X轴的偏移量 y：Y轴的偏移量 因为位置的平移是针对画布的，所以一般，我们绘制的图形都会受到平移的影响特别注意：clearRect()也会受到
Canvas之translate、scale、rotate、skew方法讲解！
热门推荐
GAStudio
05-07 7万+
前面说Canvas大致可以分为三类： 1. save、restore 等与层的保存和回滚相关的方法； 2. scale、rotate、clipXXX 等对画布进行操作的方法； 3. drawXXX 等一系列绘画相关的方法； 前面主要讲了drawBitmap方法，并举了一个星球浮动的栗子，在那个例子中，星球有大有小，需要移动，有时候可能需求上还需要旋转或错切，有了这些需求，我们就需要使用到与Canvas相关的translate、scale、rotate、skew这几个方法，平移、缩放、旋转、错切,这四个词听起
canvas-变换-translate(移动)
weixin_54057363的博客
03-08 400
变换-移动 translate(x,y)
canvas的转换方法
CSH_lucky的博客
05-10 372
导言：在画布中我们需要对绘制的图像进行移动，那么下面就是canvas来提供的一些方法 一、 translate() 平移 translate(x,y) 重新映射画布上的 (0,0) 位置 x 沿x轴平移的距离 y 沿y轴平移的距离 注意：translate平移的是原点，而不是直接平移线条。 cxt.beginPath(); cxt.moveTo(0,0); cxt.lineTo(100,100); cxt.stroke(); // cxt.tran
vue 使用canvas 详细教程
一步一个脚印，踏实努力，向着目标前进
09-12 5249
Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。它提供了一种简洁的方式来管理和渲染数据，同时也支持与其他库和工具的集成。方法获取当前的时间，并根据小时、分钟和秒钟的值计算出指针的位置。然后，我们定义了一些函数来绘制时钟的各个部分。方法绘制了一个填充整个 Canvas 的矩形。方法绘制一个矩形路径，并使用。方法绘制一个圆形路径，并使用。方法开始一个新的路径，使用。方法开始一个新的路径，使用。函数，实现时钟的动态效果。函数用于绘制时钟的外圆，函数用于绘制时钟的刻度，
canvas变换
文涛的专栏
05-10 1万+
概述要运用好canvas绘图，不仅需要使用前面说到的canvas的基本绘制，也必须使用好canvas的变换。Canvas的变换有 平移（translate），旋转（rotate）,缩放（scale），错切（skew），裁剪（clip），保存（save），保存图层(saveLayer)，恢复（restore）,恢复到指定状态(restoreToCount)等。以上的变换操作与屏幕的显示有一定关系，首先
Canvas的变换
天空之外
07-23 152
Canvas的变换的相关内容主要是从平移（translate）、旋转（rotate）、缩放（scale）、矩阵变换（Tramsform）、阴影（Shadow）、画布合成和路径裁剪（Clip）多个方面拓展了Canvas的绘图能力。 1：Translate（平移） translate(x,y); // x 左右偏移量，y 上下偏移量 2：Rotate（旋转） rotate(a...
HTML5 canvas变换
One of thre_tigers的博客
01-28 491
简介： 在上一篇博客中，我们介绍了canvas对图片的操作，在这一里我们将继续介绍canvas的变换方法，这些方法很类似于CSS，如果你对CSS比较了解，那么这些方法将十分轻松：旋转rotate，缩放scale，移动translate，矩阵变换transform，下面我们将介绍这些方法： 1.状态的保存和恢复save() 和restore（） 状态 绘制复杂图形时涉及到状态的保存和恢复，在canv...
canvas-score
05-02
运行简单的绘制和变换操作，而不会产生视觉干扰。 提供获得的帧结果的反馈。 对于确定实际性能功能很有用，而不是局限性的移动与台式机检查，这可能并不总是足够的。 可配置的： 持续时间（固定或持续直到被中断） ...
canvas-dice:canvas dice html5 摇色子
05-16
html5 canvas学习该练习是一个摇色子的游戏通过 1 + Math.floor(Math....提供了randowDraw随机画色子的方法，会滚动色子，并返回一个es6的Promise对象随机的时候，色子变换的时间间隔，采用了一元二次方程的抛物线
canvas 阴影和图形变换的示例代码
09-27
主要介绍了canvas 阴影和图形变换的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解通过变换矩阵实现canvas的缩放功能
09-22
主要介绍了详解通过变换矩阵实现canvas的缩放功能的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5 canvas文字变换切换特效
06-11
这是一款鼠标点击文字变换动画特效代码，html5 canvas文字变换切换特效。
canvas常用方法总结
沃德天，倪维胜么，捺莫帅？
10-07 419
canvas常用方法总结 this.canvas 获取上下文canvas元素 fillStyle() 颜色 font='' 字体样式 globalAlpha='' 透明度 globalCompositeOperation=''混合模式 lineCap='' 线条端点的样式 lineDashOffset='' 虚线绘制的偏移距离 lineJoin=''
canvas基础之变换
weixin_30376163的博客
07-23 101
2D绘制上下文支持各种基本的绘制变换： rotate(angle)：围绕原点旋转图像angle弧度。（举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。） scale(scaleX,scaleY)：缩放图像，在x方向乘以scaleX，在y方向乘以scaleY，scaleX和scaleY的默认值都是1.0。如果对绘图进行缩放，所有之后的绘图也会被缩放，定位也会被缩放。 ...
canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)
IT1995的博客
06-01 4511
这里首先演示下位移，这里使用的函数是translate(x,y)这个函数是叠加的，也就是说，当translate(100,100)，后再次调用translate(200,200)，那么最后圆点的基准值就为translate(300,300)。 也就是说如果要实现某个图形的位移后，还要变回来。 代码如下： translate(100, 100); //TODO ... ... translate(-100, -100); 或者使用如下的方式： save(); //保存当前图形状态 Res...
C# WPF canvas 坐标变换
最新发布
12-13
C# WPF中的Canvas控件提供了一些方法来设置控件的坐标变换。以下是两种设置控件坐标的方法： 1. 在XAML中设置控件坐标 在XAML中，可以使用Canvas.Left和Canvas.Top属性来设置控件的左上角坐标。例如，在一个Canvas控件中添加一个Label控件，并将其放置在(10.9, 20.39)的位置，可以这样写： ```xml <Canvas x:Name="printArea" Width="680" Height="280" Margin="90,80" Background="Blue"> <Label Content="文本框：" Canvas.Left="10.9" Canvas.Top="20.39" Width="80" Height="30" FontSize="12" Foreground="Black"/> </Canvas> ``` 2. 在C#后台代码中动态设置控件坐标 在C#中，可以使用Canvas.SetLeft和Canvas.SetTop方法来设置控件的左上角坐标。例如，在一个Canvas控件中添加一个Label控件，并将其放置在(10.9, 20.39)的位置，可以这样写： ```csharp Label label = new Label { Content = "测试", FontSize = 14, Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000")) }; Canvas.SetTop(label, 10.9); Canvas.SetLeft(label, 20.39); printArea.Children.Add(label); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值