当前位置:网站首页>canvas图形操作(缩放、旋转、位移)
canvas图形操作(缩放、旋转、位移)
2022-08-11 09:02:00 【好奇的菜鸟】
一、缩放
<!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.95
ctx.scale(0.95, 0.95);
//设置旋转18度
ctx.rotate(18 * Math.PI / 180);
ctx.fillRect(0, 0, 100, 50);
}
}
</script>
</html>
边栏推荐
猜你喜欢
Lightweight network (1): MobileNet V1, V2, V3 series
2022年值得关注的NFT发展趋势
Rust从入门到精通06-函数
基础SQL——DDL
excel将数据按某一列值分组并绘制分组折线图
dsu on tree(树上启发式合并)学习笔记
nodejs worker_threads的事件监听问题
What should I do if the mysql data query causes the cup to be full because the query time span is too large
Detailed Explanation of the Level 5 Test Center of the Chinese Institute of Electronics (1)-string type string
flex布局回顾
随机推荐
四级独创的阅读词汇表
Unity3D - modification of the Inspector panel of the custom class
oracle使用online_catalog收集数据,想看下online_catalog模式修改表字
基于 VIVADO 的 AM 调制解调(1)方案设计
Kotlin算法入门求完全数
程序员是一碗青春饭吗?
基于C#通过PLCSIM ADV仿真软件实现与西门子1500PLC的S7通信方法演示
2022-08-09 顾宇佳 学习笔记
QTableWidget 使用方法
仙人掌之歌——大规模高速扩张(1)
jenkins 流水线脚本详细解析Pipeline
万字长文带你了解多态的底层原理,这一篇就够了
1002 A+B for Polynomials
@RequiredArgsConstructor注解
Unity3D——自定义类的Inspector面板的修改
【系统梳理】微服务的注册和发现中心
Kali penetration test environment set up
Detailed Explanation of the Level 5 Test Center of the Chinese Institute of Electronics (1)-string type string
Linux,Redis中IOException: 远程主机强迫关闭了一个现有的连接。解决方法
WiFi cfg80211