整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ranslate移动变形
translate()移动画布, rotate()旋转画布。
canvas中不能只移动某一个对象, 移动的都是整个画布。
canvas中不能只旋转某一个对象, 旋转的都是整个画布。
但是可以用save()、restore()来巧妙设置, 实现让某一个元素进行移动和旋转。
移动变形、移动的是整个画布、而不是某个元素, 在ctx.translate()之后绘制的语句都将被影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext("2d");
ctx.translate(100, 100); //将画布坐标系移动，坐标系就发生变化了
ctx.fillRect(0, 0, 100, 100); //相对于移动后的坐标系开始画画
</script>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext("2d");
ctx.translate(100, 100); //将画布坐标系移动，坐标系就发生变化了
ctx.fillRect(0, 0, 100, 100); //相对于移动后的坐标系开始画画
ctx.beginPath();
ctx.arc(100, 100, 100,0 , 6.28, false);
ctx.fillStyle="skyblue";
ctx.fill();
</script>
</html>save()保存和restore()恢复
ctx.save()表示保存上下文的物理性质, ctx.restore()表示恢复最近一次的保存。
save表示保存sava函数之前的状态, restore表示获取save保存的状态。
移动了的元素, 会影响不需要移动圆点坐标的元素, 所以可以使用以上两个方法保存起来, 可以解决让某一个元素移动变形不受影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext("2d");
ctx.save();
ctx.translate(100, 100); //将画布坐标系移动，坐标系就发生变化了
ctx.fillRect(0, 0, 100, 100); //相对于移动后的坐标系开始画画
ctx.restore()
ctx.beginPath();
ctx.arc(100, 100, 100, 0 , 6.28, false);
ctx.fillStyle="skyblue";
ctx.fill();
</script>
</html>rotate()旋转变形
旋转的是整个坐标系, 坐标系以0,0点为中心点进行旋转。
rotate(1)的参数, 是弧度, 旋转的也不是矩形, 而是画布。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext("2d");
ctx.save();
ctx.translate(150,150)
ctx.rotate(1); //1表示57.3度（1弧度）
ctx.fillRect(-50, -50, 100, 100); //相对于移动后的坐标系开始旋转
ctx.restore()
</script>
</html>旋转动画
转木马
有些小伙伴0基础小伙伴担心，我没有编程工具怎么办？
这个不需要编程工具的，只需要找9张图片改改名称就行
(1) 新建一个文件夹
(2) 文件夹中新建img文件夹 以及一个txt文档
(3) 把我放在下面的代码粘贴到txt文档中
（4）没有txt后缀的这样设置一下（这里以win11为例，点击查看-->显示-->文件扩展名）
（5）把文本文档名称改为旋转木马.html
（6）把图片放在img文件夹里面，需要9张
（7）图片重命名为 1.jpg 2.jpg 3.jpg 以此规律命名（200 x 300 像素的图片）
（8）设置图片像素（用win自带照片软件打开-->点击... --> 重设大小-->自定义尺寸-->把宽度改成200、高度改成200-->保存）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 300px;
/* border: 1px solid black; */
margin: 50px auto;
position: relative;
/* 设置3D 效果 */
transform-style: preserve-3d;
/* 添加3D视距 透视效果 */
/* perspective: 300px; */
transform: rotateX(-15deg);
/* CSS animation动画属性
name 定义动画名称
duration 定义动画执行时间 秒/单位
timing-function 定义动画执行速度 linear 匀速
delay 定义动画执行等待 秒/单位
iteration-count 定义动画执行次数 默认为1 无限执行 infinite
animation-play-state 动画运行状态控制 默认running运行 paused 暂停
*/
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: move 10s linear infinite;
}
/* 定义关键帧动画 执行我们定义的动画 */
@keyframes move{
0%{
/* 在CSS3 变幻属性中 如果要给一个元素添加多个变幻属性
需要将所有的变幻属性都写在transform
*/
transform:rotateX(-15deg) rotateY(0deg);
}
100%{
transform:rotateX(-15deg) rotateY(360deg);
}
}
/* :hover 伪类选择器 设置用户鼠标移入时的效果 */
.box:hover{
/* 当用户鼠标移入时 动画由默认的运行状态变成暂停 */
animation-play-state: paused;
}
.box div{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 300px;
margin-top: 50px;
}
/* :nth-child(1) */
.box div:nth-child(1){
/* 改变页面第一张图片 变幻属性
transform 变幻属性
rotate 旋转
translate 位移
*/
transform: rotateY(40deg) translateZ(275px);
}
.box div:nth-child(2){
transform: rotateY(80deg) translateZ(275px);
}
.box div:nth-child(3){
transform: rotateY(120deg) translateZ(275px);
}
.box div:nth-child(4){
transform: rotateY(160deg) translateZ(275px);
}
.box div:nth-child(5){
transform: rotateY(200deg) translateZ(275px);
}
.box div:nth-child(6){
transform: rotateY(240deg) translateZ(275px);
}
.box div:nth-child(7){
transform: rotateY(280deg) translateZ(275px);
}
.box div:nth-child(8){
transform: rotateY(320deg) translateZ(275px);
}
.box div:nth-child(9){
transform: rotateY(360deg) translateZ(275px);
}
</style>
</head>
<body>
<div class="box">
<div>
<img src="./img/1.jpg" alt="">
</div>
<div>
<img src="./img/2.jpg" alt="">
</div>
<div>
<img src="./img/3.jpg" alt="">
</div>
<div>
<img src="./img/4.jpg" alt="">
</div>
<div>
<img src="./img/5.jpg" alt="">
</div>
<div>
<img src="./img/6.jpg" alt="">
</div>
<div>
<img src="./img/7.jpg" alt="">
</div>
<div>
<img src="./img/8.jpg" alt="">
</div>
<div>
<img src="./img/9.jpg" alt="">
</div>
</div>
</body>
</html>
上一篇：ABB机器人Sockets通讯
天跟大家分享一个很很酷6的一个网站前端小技术，
打开网页编辑软件，新建一个HTML网页，然后在body里写下如图代码
然后添加css3样式代码如图
添加好后点击键盘上的ctrl+s保存，保存路径随意
欢迎大家转载收藏，有需要源码的朋友可以关注我后私聊我，还可以加咱们的交流群：309073798
最后有不好的地方欢迎在留言区吐槽
*请认真填写需求信息，我们会在24小时内与您取得联系。
