js+canvas 디스크 효과 실현 (두 버전)
캔버스의 그리기, 회전, 다시 그리기 조작, 타이머, 텍스트, 평이, 선, 원, 캔버스 정리 등에 사용되었다.
버전 1
클릭 불가, 회전 새로 고침
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
#myCanvas {
background: #FAEBD7;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var cxt = myCanvas.getContext("2d");
//
cxt.translate(250, 250);
//
var oX = 0;
var oY = 0;
//
var oR = 150;
//
var oR1 = 50;
//
var oH = Math.PI / 180;
//
var timer;
//
var angle = 0;
//
var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];
//
var colorArr = [];
//
for (var i = 0; i < textArr.length; i++) {
var c = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")"
colorArr.push(c);
}
//
var seep = Math.random() * 100 + 100;
timer = setInterval(function() {
if (seep < 0.3) {
clearInterval(timer);
var index = Math.floor(angle / 45);
console.log(index);
cxt.font = "12px Arial";
cxt.textAlign = "center";
cxt.textBaseline = "middle"
cxt.fillStyle = "black";
var txt = textArr[textArr.length - index-1];
// console.log(cxt.measureText(txt).width);
cxt.fillText(txt, 0, 0);
} else {
//
//
cxt.clearRect(-250, -250, 500, 500);
//
if (angle >= 360) {
angle = 0;
}
//
seep *= 0.95; //
angle += seep;
//
cxt.beginPath();
cxt.strokeStyle = "red";
cxt.lineWidth = 2;
cxt.moveTo(150, 0);
cxt.lineTo(180, 0);
cxt.stroke();
// ,
cxt.strokeStyle = "chartreuse";
cxt.save();
cxt.rotate(angle * oH);
//
for (var i = 0; i < 8; i++) {
cxt.fillStyle = colorArr[i];
cxt.beginPath();
cxt.moveTo(0, 0);
cxt.arc(0, 0, 150, i * 45 * oH, (i + 1) * 45 * oH);
cxt.closePath();
cxt.fill();
cxt.stroke();
}
//
cxt.fillStyle = "#FFF";
cxt.beginPath();
cxt.arc(oX, oY, oR1, 0, 2 * Math.PI);
cxt.fill();
//
for (var i = 0; i < textArr.length; i++) {
cxt.save();
cxt.rotate((i * 45 + 25) * oH);
cxt.fillStyle = "#fff";
cxt.font = "16px ";
cxt.fillText(textArr[i], 70, 0);
cxt.restore();
}
cxt.restore();
//
}
}, 50);
</script>
</html>
버전 2클릭 이벤트 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
#myCanvas {
background: #FAEBD7;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var cxt = myCanvas.getContext("2d");
//
cxt.translate(250, 250);
//
var oX = 0;
var oY = 0;
//
var oR = 150;
//
var oR1 = 50;
//
var oH = Math.PI / 180;
//
var timer;
//
var angle = 0;
//
var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];
//
var colorArr = [];
//
for (var i = 0; i < textArr.length; i++) {
var c = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")"
colorArr.push(c);
}
//
var seep = Math.random() * 100 + 100;
drawLine();
myCanvas.onclick = function(event) {
var mX = event.clientX - myCanvas.offsetLeft;
var mY = event.clientX - myCanvas.offsetTop;
if (cxt.isPointInPath(mX, mY)) {
var j = 50;
var times = null;
if (times == null) {
times = setInterval(function() {
if (seep < 0.3) {
clearInterval(timer);
var index = Math.floor(angle / 45);
console.log(index);
cxt.font = "12px Arial";
cxt.textAlign = "center";
cxt.textBaseline = "middle"
cxt.fillStyle = "black";
var txt = textArr[textArr.length - index - 1];
cxt.fillText(txt, 0, 0);
} else {
drawLine();
}
}, 50);
}
} else {
alert("no")
}
}
function drawLine() {
//
//
cxt.clearRect(-250, -250, 500, 500);
//
if (angle >= 360) {
angle = 0;
}
//
seep *= 0.95; //
angle += seep;
//
cxt.beginPath();
cxt.strokeStyle = "red";
cxt.lineWidth = 2;
cxt.moveTo(150, 0);
cxt.lineTo(180, 0);
cxt.stroke();
// ,
cxt.strokeStyle = "chartreuse";
cxt.save();
cxt.rotate(angle * oH);
//
for (var i = 0; i < 8; i++) {
cxt.fillStyle = colorArr[i];
cxt.beginPath();
cxt.moveTo(0, 0);
cxt.arc(0, 0, 150, i * 45 * oH, (i + 1) * 45 * oH);
cxt.closePath();
cxt.fill();
cxt.stroke();
}
//
cxt.fillStyle = "#FFF";
cxt.beginPath();
cxt.arc(oX, oY, oR1, 0, 2 * Math.PI);
cxt.fill();
//
for (var i = 0; i < textArr.length; i++) {
cxt.save();
cxt.rotate((i * 45 + 25) * oH);
cxt.fillStyle = "#fff";
cxt.font = "16px ";
cxt.fillText(textArr[i], 70, 0);
cxt.restore();
}
cxt.restore();
//
}
</script>
</html>
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.