溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文章向大家介紹怎么在JavaScript中canvas實(shí)現(xiàn)一個(gè)圍繞旋轉(zhuǎn)動畫，主要包括怎么在JavaScript中canvas實(shí)現(xiàn)一個(gè)圍繞旋轉(zhuǎn)動畫的使用實(shí)例、應(yīng)用技巧、基本知識點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下。
JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。
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>
<div id="cas"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
//創(chuàng)建舞臺
var stage = new Konva.Stage({
container: "cas",
width: width,
height: height
});
//創(chuàng)建層
var layer = new Konva.Layer();
//創(chuàng)建組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);
//第二個(gè)圓
var circle2 = new Konva.Circle({
x: 0,
y: 0,
radius: 150,
stroke: "#ccc",
strokeWidth: 1,
dash: [6, 3]
});
group.add(circle2);
//第三個(gè)圓
var circle3 = new Konva.Circle({
x: 0,
y: 0,
radius: 135,
stroke: "blue",
strokeWidth: 2,
dash: [10, 5]
});
group.add(circle3);
//第四個(gè)圓
var circle4 = new Konva.Circle({
x: 0,
y: 0,
radius: 105,
fill: "#ccc",
opacity: 0.4
});
group.add(circle4);
//第五個(gè)圓
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);
//*****************************************************
//創(chuàng)建組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軸的坐標(biāo)
y : 250 * Math.sin(72 * i * Math.PI / 180), //圓心y軸的坐標(biāo)
outR : 60, //外圓的半徑
inR : 50, //內(nèi)圓的半徑
fill : arrColor[i], //填充顏色
text: arrText[i], //文字
outOpacity : 0.3, //外圓的透明度
inOpacity : 0.6 //內(nèi)圓的透明度
});
cir.drawCircle(outGroup);
}
layer.add(outGroup);
//***********************************************
//創(chuàng)建組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軸的坐標(biāo)
y : 135 * Math.sin(90 * i * Math.PI / 180), //圓心y軸的坐標(biāo)
outR : 45, //外圓的半徑
inR : 35, //內(nèi)圓的半徑
fill : arrColor[i], //填充顏色
text: arrText[i], //文字
outOpacity : 0.3, //外圓的透明度
inOpacity : 0.6 //內(nèi)圓的透明度
});
cir.drawCircle(inGroup);
}
layer.add(inGroup);
//************************************************
//運(yùn)動動畫
var step = 1; //轉(zhuǎn)動的角度
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文件
function Circle(obj) {
this._init(obj);
}
Circle.prototype = {
_init: function (obj) {
this.x = obj.x, //圓心x軸的坐標(biāo)
this.y = obj.y, //圓心y軸的坐標(biāo)
this.outR = obj.outR, //外圓的半徑
this.inR = obj.inR, //內(nèi)圓的半徑
this.color = obj.fill, //填充顏色
this.text = obj.text, //內(nèi)圓的文字
this.outOpacity = obj.outOpacity, //外圓的透明度
this.inOpacity = obj.inOpacity //內(nèi)圓的透明度
},
drawCircle: function (group) {
//創(chuàng)建一個(gè)組
var groupCir = new Konva.Group({
x: this.x,
y: this.y
});
//外圓
var outCir = new Konva.Circle({
x: 0,
y: 0,
radius: this.outR,
fill: this.color,
opacity: this.outOpacity
});
groupCir.add(outCir);
//內(nèi)圓
var inCir = new Konva.Circle({
x: 0,
y: 0,
radius: this.inR,
fill: this.color,
opacity: this.inOpacity
});
groupCir.add(inCir);
//添加文字
var text = new Konva.Text({
x: -this.inR,
y: -10,
text: this.text,
fill: "white",
fontSize: 20,
width: 2 * this.inR,
align: "center"
});
groupCir.add(text);
group.add(groupCir);
}
}效果圖片：
到此這篇關(guān)于怎么在JavaScript中canvas實(shí)現(xiàn)一個(gè)圍繞旋轉(zhuǎn)動畫的文章就介紹到這了，更多相關(guān)的內(nèi)容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼