canvas实例--变换

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

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #00FFFF
			}
			#test{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				background-color: antiquewhite;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var canvas = document.querySelector("#test");
				if(canvas.getContext){
					var ctx = canvas.getContext("2d");
					ctx.save();
					ctx.translate(300,300);
					ctx.fillStyle = "red";
					ctx.beginPath();
					ctx.fillRect(-50,-50,100,100);
					ctx.restore();
					
					//控制旋转度数
					var flag = 0;
					//缩放的因数
					var scaleN = 0;
					//控制是+1还是-1
					var scaleFlag = 0;
					
					setInterval(function(){
						if(scaleN === 100){
							scaleFlag = -1;
						}else if(scaleN === 0){
							scaleFlag = 1;
						}
						scaleN += scaleFlag;
						// 清除画布
						ctx.clearRect(0,0,canvas.width,canvas.height);
						ctx.save();
						ctx.translate(300,300);
						ctx.fillStyle = "red";
						ctx.rotate(flag++*Math.PI/180);
						ctx.scale(scaleN/50,scaleN/50)
						ctx.beginPath();
						ctx.fillRect(-50,-50,100,100);
						ctx.restore();
					},1000/60)
				}
			}
		</script>
	</head>
	<body>
		<canvas id="test" width="600" height="600"></canvas>
	</body>
</html>
时光无声￡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas-变换
nicecode
07-27 160
canvas中的变换 translate(x, y) 我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量， 在canvas中translate是累加的 rotate(angle) 这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。 旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法 在canvas中ro
canvas-使用图片&设置背景(图片背景,线性渐变,径向渐变)
nicecode
07-27 5357
在canvas中插入图片(需要image对象) ​ 1.canvas操作图片时，必须要等图片加载完才能操作 ​ 2.drawImage(image, x, y, width, height) ​ 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。 ​ 这个方法多了2个参数：width 和 height，这两个参数用来控制图片的大小 <!DOCTYPE html> <html> <head> <m
canvas简单动画
weixin_44552543的博客
05-26 536
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="text" height="300" width="300"...
canvas-变换实例
weixin_54057363的博客
03-08 63
canvas变换实例-结合旋转缩放
HTML5教程实例-Canvas标签-坐标变换与路径结合使用
yixuan_1的专栏
09-27 943
HTML5教程实例-Canvas标签-坐标变换与路径结合使用 到目前为止，我们已经学会了很多Canvas的绘制方法，如果我们要绘制如下图的图形怎么办呢？ 我们需要对矩形变形，使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候，那么要考虑的事情就 多了。因为使用坐标变换之后，已经创建好的路径就不可用了。必须要重新创建路径，重新创建路径后，坐标变换方法又失效了。
canvas-collection合集
最新发布
04-07
"canvas-collection合集"中的实例可能涵盖这些应用场景，有助于开发者快速上手并解决实际问题。 总之，"canvas-collection合集"是一个宝贵的资源，对于想要学习或提升Canvas技能的开发者来说，它提供了大量实战案例...
超多经典canvas实例
08-11
"超多经典canvas实例"这个资源集合，显然是为了帮助开发者深入理解和掌握Canvas的使用技巧。在这个压缩包`canvas-special-master`中，可能包含了各种各样的Canvas应用示例，涵盖了基础到高级的各种功能。 首先，...
html5之Canvas路径绘图、坐标变换应用实例
09-28
本文写一个html5的时钟应用程序试手主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等多的也不说了，直接上代码有需要的朋友可以参考下
test-canvas
03-19
在"test-canvas-main"这个文件中，可能会包含一个或多个JavaScript文件，它们可能包含了各种Canvas API的使用示例，如动态动画、图像处理、图形变换（如旋转、缩放、平移）等。这些示例可以帮助开发者理解和掌握...
canvas-绘制圆形
nicecode
07-27 5223
角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。 canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) ​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， ​ 按照anticlockwise给定的方向（默认为顺时针）来生成。 ​ ture：逆时针 ​ false: 顺时针 ​ x,y为绘制圆弧所在圆上的圆心坐标
canvas-绘制矩形
nicecode
07-26 4816
canvas绘制矩形 ​ HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制一个矩形的边框（默认边框为:一像素实心黑色） strokeRect(x, y, width, height) ---->清除指定矩形区域，让清除部分完全透明。
canvas绘制文本&文本的
nicecode
07-27 1519
在canvas中绘制文本 ​ canvas 提供了两种方法来渲染文本: ​ fillText(text, x, y) ​ 在指定的(x,y)位置填充指定的文本 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; paddin
canvas-基本用法
nicecode
07-26 643
canvas基本用法 1.什么是canvas(画布) <canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形 例如，它可以用于绘制图形，创建动画。<canvas> 最早由Apple引入WebKit 我们可以使用<canvas>标签来定义一个canvas元素 ----->使用<canvas>标签时，建议要成对出现，不要使用闭合的形式。 ----->canvas元素默认具有高宽 wi
canvas-绘制路径
nicecode
07-27 540
canvas绘制路径 ​ 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。 ​ 步骤 ​ 1.首先，你需要创建路径起始点。 ​ 2.然后你使用画图命令去画出路径 ​ 3.之后你把路径封闭。 ​ 4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。 ​ 绘制三角形 beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。 生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，
canvas覆盖合成&全局透明度设置
nicecode
07-27 518
全局透明度的设置 ​ globalAlpha = value ​ 这个属性影响到 canvas 里所有图形的透明度， ​ 有效的值范围是 0.0 （完全透明）到 1.0（完全不透明） ​ 默认是 1.0 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{
canvas总结
nicecode
07-28 446
1.注意点 ​ —canvas图像的渲染有别于html图像的渲染， ​ canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题 ​ 写canvas代码一定要具有同步思想 ​ —在获取上下文时，一定要先判断 ​ —画布高宽的问题 ​ 画布默认高宽300*150 ​ 切记一定要使用html的attribute的形式来定义画布的宽高 ​ 通过css形式定义会缩放画布内的图像 ​ —绘制矩形的问题 ​ a.边框宽度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，
canvas-像素操作
nicecode
07-27 402
在canvas中的像素操作 ​ 到目前为止，我们尚未深入了解Canvas画布真实像素的原理，事实上， ​ 你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中 ​ 得到场景像素数据 ​ getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据 ​ ctx.getImageData(sx, sy, sw, sh) sx:将要被提取的图像数据矩形区域的左上角 x 坐标。 sy:将要被提取的图像数据矩形区域的左上角 y 坐标
canvas-将画布导出为图像&事件操作
nicecode
07-27 204
将画布导出为图像 ​ toDataURL(注意是canvas元素接口上的方法) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%;
canvas border-shadow
06-03
你的问题是如何使用CSS在canvas元素上添加边框阴影效果。可以通过以下CSS属性来实现： ```css canvas { border: 1px solid #ccc; /* 添加边框 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影 */ } ``` 这将在canvas元素周围添加一个1像素宽的灰色边框，并在元素下方添加一个2像素高的阴影，阴影颜色为黑色，透明度为0.2。你可以根据需要调整这些值来达到所需的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值