canvas图形操作(缩放、旋转、位移)
2024-04-21 20:51:32
一、缩放
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.strokeStyle="rgb(0,255,255)"ctx.strokeRect(5, 5, 25, 25);//缩放图形，宽度2倍，长度2倍ctx.scale(2, 2);ctx.strokeStyle="rgb(206,70,28)"ctx.strokeRect(5, 5, 25, 25)
</script>
</html>
红同矩形长宽各放大了两倍
二、旋转
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.strokeStyle="rgb(0,255,255)"ctx.strokeRect(50, 20, 100, 50)//按照弧度旋转45度，Math.PI/180表示一度(弧度转度)ctx.rotate(45*Math.PI/180);ctx.strokeStyle="rgb(206,70,28)"ctx.strokeRect(50, 20, 100, 50)
</script>
</html>
三、位移
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="210" height="200"></canvas>
</body>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.strokeStyle="rgb(0,255,255)"ctx.strokeRect(50, 20, 70, 50)//将绘制图形(0,0)坐标位移(70,70)ctx.translate(70,70);ctx.strokeStyle="rgb(206,70,28)"ctx.strokeRect(50, 20, 70, 50)
</script>
</html>
四、缩放、倾斜、位移
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.fillStyle="yellow"ctx.fillRect(0,0,250,100)//水平绘制参数倍数1，水平倾斜30度，垂直绘制1倍，垂直倾斜1弧度，水平移动，垂直移动ctx.transform(1,30*Math.PI/180,-0.5,1,30,10);ctx.fillStyle="red"ctx.fillRect(0,0,250,100)ctx.transform(1,30*Math.PI/180,-0.5,1,30,10);ctx.fillStyle="blue"ctx.fillRect(0,0,250,100)ctx.transform(1,30*Math.PI/180,-0.5,1,30,10);ctx.fillStyle="pink"ctx.fillRect(0,0,250,100)
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas</title>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="300" height="400"></canvas>
</body>
<script>function draw(id) {//获取元素var canvas = document.getElementById(id);if (canvas == null) {return false;}//获取canvas上下文var ctx = canvas.getContext('2d');//设置径向渐变颜色var g1 = ctx.createRadialGradient(400, 50, 50, 400, 50, 400);g1.addColorStop(0, 'rgb(255,255,0)');g1.addColorStop(0.3, 'rgb(255,0,255)');g1.addColorStop(1, 'rgb(0,255,255)');ctx.fillStyle = g1;ctx.fillRect(0, 0, 500, 500);//重新设置中心点ctx.translate(200, 50);ctx.fillStyle = "rgba(255,0,0,0.25)";for (var i = 0; i < 50; i++) {ctx.translate(25, 25);//设置缩放0.95ctx.scale(0.95, 0.95);//设置旋转18度ctx.rotate(18 * Math.PI / 180);ctx.fillRect(0, 0, 100, 50);}}
</script>
</html>
canvas图形操作(缩放、旋转、位移)相关推荐
- canvas图形缩放功能
在实现缩放功能之前,我们无非需要考虑的是图形中心点的位置确定问题,在默认状态下不论是原点还是中心点均在画布的左上角位置,在不改变原点坐标的情况下对图形进行位移操作以实现缩放后确立中心点的位置. 业务场 ...
- 线性代数：矩阵变换图形（二维平移缩放旋转）
转载自: https://blog.csdn.net/yinhun2012/article/details/79544205 前面我们从理论上理解了图形学中图形的变换过程,具体可以理解为如果要对一个图 ...
- CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...
- Android Canvas 平移、缩放、旋转的理解
自己对这个几个方法,用了好多次了,但对它们的原理概念都还是没仔细理解清楚,真是太菜了. View和canvas并不是同一个东西,可以这样想象,我们的View是固定的,相当于与一个画板或者画框,画板范围 ...
- android画布旋转,Android Canvas 平移、缩放、旋转的理解
自己用了很久对这个几个方法,用了好多次了,但对它们的原理概念都还是没仔细理解清楚,真是太菜了. View和canvas并不是同一个东西,可以这样想象,我们的View是固定的,相当于与一个画框,画框范围 ...
- cad块炸开软件_CAD软件中将CAD图形定义为旋转动态块的操作技巧
在我们使用浩辰CAD软件绘制CAD图纸的过程中,如果频繁的创建图块,会浪费我们的时间,为了提高绘图速率,可以将CAD图纸中的图形定义为动态块,那怎么在CAD软件中将CAD图形定义为旋转动态块呢?接下来 ...
- android里面画布快照,自定义 View - Canvas - 画布操作和快照
操作 API 备注 移动画布 translate(float dx, float dy) -- 画布旋转 rotate(float degrees) -- 画布旋转 rotate(float degr ...
- 【canvas 图形画布标签】(使用详解)
canvas 图形画布标签 1. 如何定义一个 图形画布 ? 1.1 canvas 图形画布 标签的属性 有哪些 ? 1.2 canvas 图形画布的 基本用法 有哪些 ? 1.3 如何使用 canv ...
- canvas像素操作、save与restore、合成与变形
一.canvas像素操作 (1)获取图像像素 (2)写入像素数据 (3)创建像素数据 (4)小案例,将canvasA画布的图像复制到canvasB中 二.canvas的save与restore 三.c ...
最新文章
- 4行关键代码实现灰色模型GM(1, 1)
- JavaFX 的 UI 控件集 ControlsFX
- poj3723Conscription
- 谷歌maps菜单语言设置_Google Maps：拯救未来之路— UX案例研究
- 计算机科学现代教育,现代教育技术教程-计算机科学教育.pdf
- C#与JavaScript中URL编码解码问题(转)
- Docker 安装 maven 私服
- 安装mysql客户端
- 计算机组成原理-概述篇
- 网络分析系列之十三 Wireshark显示过滤器
- 内存中的存储空间（栈空间、堆空间、数据段、代码段）
- 警示灯emark认证需要什么条件？
- 在CentOS上MySQL数据库服务器配置方法
- 无法在节点上执行物理内存检查
- 【WebLogic】解决opatch执行报错“Exception occured: fuser could not be located”
- 那些SAP项目里的主流外围系统
- 前台、前端、后台和后端的区别
- JAVA版 中文地址 识别 切分
- Springboot整合JPA多数据源（Oracle+Mysql）
- 计算机开机跳过硬盘检查,怎么跳过开机硬盘自检的三个方法