您的当前位置:首页正文

JavaScriptcanvas实现围绕旋转动画

2023-11-30 来源:博科教育
本文主要为大家详细介绍了JavaScript canvas实现围绕旋转动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针。

代码demo链接地址:代码demo链接地址

html文件

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f0f0; } </style> <script src="js/konva.js"></script> <script src="js/circle.js"></script> </head> <body> <p id="cas"></p> <script> var width = window.innerWidth; var height = window.innerHeight; //创建舞台 var stage = new Konva.Stage({ container: "cas", width: width, height: height }); //创建层 var layer = new Konva.Layer(); //创建组1 var group = new Konva.Group({ x: stage.width() / 2, y: stage.height() / 2, }); //最外层圆 var circle1 = new Konva.Circle({ x: 0, y: 0, radius: 250, stroke: "#ccc", strokeWidth: 1, dash: [6, 3] }); group.add(circle1); //第二个圆 var circle2 = new Konva.Circle({ x: 0, y: 0, radius: 150, stroke: "#ccc", strokeWidth: 1, dash: [6, 3] }); group.add(circle2); //第三个圆 var circle3 = new Konva.Circle({ x: 0, y: 0, radius: 135, stroke: "blue", strokeWidth: 2, dash: [10, 5] }); group.add(circle3); //第四个圆 var circle4 = new Konva.Circle({ x: 0, y: 0, radius: 105, fill: "#ccc", opacity: 0.4 }); group.add(circle4); //第五个圆 var circle5 = new Konva.Circle({ x: 0, y: 0, radius: 80, fill: "#74A2F0" }); group.add(circle5); //添加文字 var text = new Konva.Text({ x: -80, y: -12, text: "WEB全栈", fill: "white", fontSize: 24, width: 160, align: "center" }); group.add(text); layer.add(group); //***************************************************** //创建组2 var outGroup = new Konva.Group({ x: stage.width() / 2, y: stage.height() / 2, }); var arrColor = ["red", "green", "blue", "orange", "purple"]; var arrText = ["web", "node.js", "ajax", "html5", "css"]; for(var i = 0; i < 5; i++) { var cir = new Circle({ x : 250 * Math.cos(72 * i * Math.PI / 180), //圆心x轴的坐标 y : 250 * Math.sin(72 * i * Math.PI / 180), //圆心y轴的坐标 outR : 60, //外圆的半径 inR : 50, //内圆的半径 fill : arrColor[i], //填充颜色 text: arrText[i], //文字 outOpacity : 0.3, //外圆的透明度 inOpacity : 0.6 //内圆的透明度 }); cir.drawCircle(outGroup); } layer.add(outGroup); //*********************************************** //创建组3 var inGroup = new Konva.Group({ x: stage.width() / 2, y: stage.height() / 2, }); var arrColor = ["red", "green", "blue", "orange", "purple"]; var arrText = ["web", "node.js", "ajax", "html5", "css"]; for(var i = 0; i < 5; i++) { var cir = new Circle({ x : 135 * Math.cos(90 * i * Math.PI / 180), //圆心x轴的坐标 y : 135 * Math.sin(90 * i * Math.PI / 180), //圆心y轴的坐标 outR : 45, //外圆的半径 inR : 35, //内圆的半径 fill : arrColor[i], //填充颜色 text: arrText[i], //文字 outOpacity : 0.3, //外圆的透明度 inOpacity : 0.6 //内圆的透明度 }); cir.drawCircle(inGroup); } layer.add(inGroup); //************************************************ //运动动画 var step = 1; //转动的角度 var anim = new Konva.Animation(function() { outGroup.rotate(step); outGroup.getChildren().each(function (ele, index) { ele.rotate(-step); }); inGroup.rotate(-step); inGroup.getChildren().each(function (ele, index) { ele.rotate(step); }); }, layer); anim.start(); stage.add(layer); stage.on("mouseover", function () { step = 0.3; }); stage.on("mouseout", function () { step = 1; }); </script> </body> </html>

js文件

效果图片:

JavaScript canvas实现围绕旋转动画

css旋转动画效果的简单实现示例详解

3D立方体旋转动画

小编还为您整理了以下内容,可能对您也有帮助:

javascript canvas 如何对图片进行绕中心点旋转

给你一个旋转的demo:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<br/>

<input type="text" id="angle_v" readonly="1"/>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.translate(100,45)

//ctx.rotate(70*Math.PI/180);

//ctx.fillRect(-50,-25,100,50);

var angle=10;

var angle_now = 0;

myRotate()

function myRotate()

{

  ctx.clearRect(-100,-50,200,100);//x2 是为了把原来的图全部抹掉(不留下痕迹)

  ctx.rotate(angle*Math.PI/180);

  ctx.fillRect(-50,-25,100,50);

  angle_now= (angle_now + angle)%360;

  document.getElementById("angle_v").value="当前角度:"+angle_now;

  setTimeout(myRotate,1000);

}

</script>

</body>

</html>

注意:用roate实现旋转,重点在于改变坐标中心点 : ctx.translate(100,45)

      坐标中心点计算公式:x = 左上角x + 宽度/2

                                         y = 左上角y + 高度/2

      然后translate到(x,y)即可,之后调用rotate进行旋转。

      旋转之后填充时注意:ctx.fillRect(-50,-25,100,50);

                                       x = - 宽度/2

                                       y = -高度/2

                                     fillRect(x,y,宽度,高度)

你的例子,代码控制比较看不懂。。。,所以没在基础上整改。

补充一个参考网站(英文的):http://tutorials.jenkov.com/html5-canvas/transformation.html

(如果有帮助,望采纳,谢谢)

追问谢谢你的回答,可能我没说明白,我要做的是鼠标拖动旋钮控制图片绕中心点旋转。我的代码里已经实现了绕中心旋转,只是有一些问题,并且转一下再拖拽图片的时候会有问题。

我现在找到问题所在了,因为canvas绘图函数drawImage,只能指定左上角坐标然后竖直绘制。如果旋转后再拖拽的话,需要记住旋转的角度,并且在拖拽的时候,改变位置+旋转。

我去改改代码哈!

追答问题已经解决,chrome下测试通过,但是百度字数不然传,要不楼主把分给我再开一个问题(唉,我就差两个问题升级到7了,纠结了很久)

写完了,耗时两天。把你需求改了下:

(在图片上单击时则为移动图片---包括激活和关闭。 在图片外单击则为旋转图片---如果鼠标移动到图片上则自动关闭旋转模式)

代码发到你的百度私信了。望采纳。谢谢

如何在游戏网页中实现动画效果

如何在游戏网页中实现动画效果?

随着互联网的不断发展和进步,越来越多的游戏开始在网页上进行。与此同时,游戏开发者也需要考虑如何在网页中实现更好的动画效果。本文将介绍如何在游戏网页中实现动画效果,以提高游戏的质量,吸引玩家的关注并提高用户留存率。

1.使用HTML5Canvas

HTML5Canvas是一种可用于向网页上绘制2D和3D图形的技术,可以用于绘制游戏场景及角色动画,创建精美的游戏画面,为游戏增添视觉上的效果。

2.使用CSS3动画

CSS3动画是使用CSS3技术实现动画效果,其实现方法与传统的CSS类似,可以使用关键帧和属性来定义动画效果。这种方法简单易学,能够快速创建动画,并且跨浏览器兼容性好。

3.使用JavaScript

JavaScript是一种流行的编程语言,可以通过控制游戏对象的位置、大小、颜色、透明度等来实现动画效果。尤其是三维效果的动画,JavaScript更是不可或缺的。

4.使用动画框架

动画框架是一种提供动画效果的代码库,可以简化动画的开发过程。例如,GreenSock就是一种流行的JavaScript动画框架,可以让开发者轻松地生成时间轴动画等各种复杂的动画效果。

总结

在游戏网页中实现动画效果是提高游戏质量和用户体验的重要方式。以上介绍的四种方法都可以在游戏网页中实现动画效果,并且可以根据不同的情况选择适合的方法。需要注意的是,动画效果的过度使用可能会导致游戏加载缓慢或卡顿,因此需要开发者在实现动画效果时注意游戏性能问题,提高游戏的流畅度和用户体验。

HTML5用canvas怎么实现动画效果

HTML5用canvas实现动画效果的方法:

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

<canvas id="myCanvas" width="578" height="200"></canvas>

<script>

window.requestAnimFrame = (function(callback) {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

function drawRectangle(myRectangle, context) {

context.beginPath();

context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

context.fillStyle = '#8ED6FF';

context.fill();

context.lineWidth = myRectangle.borderWidth;

context.strokeStyle = 'black';

context.stroke();

}

function animate(myRectangle, canvas, context, startTime) {

// update

var time = (new Date()).getTime() - startTime;

var linearSpeed = 100;

// pixels / second

var newX = linearSpeed * time / 1000;

if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {

myRectangle.x = newX;

}

// clear

context.clearRect(0, 0, canvas.width, canvas.height);

drawRectangle(myRectangle, context);

// request new frame

requestAnimFrame(function() {

animate(myRectangle, canvas, context, startTime);

});

}

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var myRectangle = {

x: 0,

y: 75,

width: 100,

height: 50,

borderWidth: 5

};

drawRectangle(myRectangle, context);

// wait one second before starting animation

setTimeout(function() {

var startTime = (new Date()).getTime();

animate(myRectangle, canvas, context, startTime);

}, 1000);

</script>

</body>

JS中canvas画布绘制中如何实现缩放,位移,旋转

cxt.scale(2,2);

缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小。

ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置

x: 添加到水平坐标(x)上的值

y: 添加到垂直坐标(y)上的值

发生位移后,相当于把画布的0,0坐标 更换到新的x,y的位置,所有绘制的新元素都被影响。

位移画布一般配合缩放和旋转等。

context.rotate(angle); 方法旋转当前的绘图

注意参数是弧度(PI)

如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。

博科教育还为您提供以下相关内容希望对您有帮助:

canvas图片缩放-JS中canvas画布绘制中如何实现缩放,位移,旋转

canvas中图片缩放禁用是因为设置了禁用插值,重新设置即可。canvas能够无缝集成用于绘画、图像编辑和Web设计的等工具,软件能够以多种的格式导出绘画作品。

javascript canvas 如何对图片进行绕中心点旋转

}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;注意:用roate实现旋转,重点在于改变坐标中心点 : ctx.translate(100,45)坐标中心点计算公式:x = 左上角x + 宽度/2 y = 左上角y + 高度/2 然后translate到(x,y)即可,之后调用rotate...

HTML5用canvas怎么实现动画效果

context.clearRect(0, 0, canvas.width, canvas.height);drawRectangle(myRectangle, context);// request new frame requestAnimFrame(function() { animate(myRectangle, canvas, context, startTime);});} var canvas ...

失败狮计划再现——threejs实现文字环绕动画

最后需要说明一下这个实现方法算是另辟蹊径吧,因为threejs本身是靠WEBGL作为渲染器的,而我使用的是CSS3DRenderer渲染器,正如官网所说: CSS3DRenderer用于通过CSS3的transform属性, 将层级的3D变换应用到DOM元素上。...然...

HTML5用canvas怎么实现动画效果

使用HTML5画布canvas能够快速实现简单的动画效果,基本原理如下:每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形 首先是绘制图形的方法,如下:fu...

如何在游戏网页中实现动画效果

1.使用HTML5CanvasHTML5Canvas是一种可用于向网页上绘制2D和3D图形的技术,可以用于绘制游戏场景及角色动画,创建精美的游戏画面,为游戏增添视觉上的效果。2.使用CSS3动画CSS3动画是使用CSS3技术实现动画效果,其实现方法与...

canvas前端动图如何实现

这就是动画实现的基本要素:➤ 单位时间内连续播放多张图片。这个单位时间一般以秒为单位,在计算机渲染的图形中要想获得一个足够流畅的视频,每秒钟内的图片数量必须要大于等于显示器的刷新频率(这个刷新频率一般为60hz...

如何使用JavaScript生成环绕点?

JavaScript 的 canvas 元素可以用来生成环绕点。首先,你需要在你的 HTML 页面中创建一个 canvas 元素,然后在 JavaScript 中获取这个 canvas 元素的上下文(context),然后使用 context 的 arc() 方法来绘制一个环绕点。具体...

如何用HTML5 的Canvas制作3D动画效果

1.通用类的提取:动画对象与帧对象 2.灵与肉的结合:便于拆卸的运动方程 3.进度条的实现:canvas的图片预加载 4.demo测试:通过一个demo测试框架 这一节我们先来说说通用类的提取。其实上一篇文章我已经用到了这种从flash...

如何将canvas轨迹保存为动画

具体的实现步骤如下:一、创建绘制函数 (drawFunction)clearRect(x, y, width, height);在给定的矩形内清除指定的像素。清空或覆盖画布,即重置上一帧的内容。通常将属性 fillStlyle 设置为画布背景色,如 white。fill...

Top