HTML5 Canvas 회전 애니메이션(회전 태극권 효과)의 2가지 코드 예_html5 튜토리얼 기술

效果图：

방법일:

复代码如下:

<본문>

브라우저가 캔버스 태그를 지원하지 않습니다
<스크립트 유형="텍스트/자바스크립트">
가변 각도 = 0;
var r = 30;
var rl = 100;
함수 drawTaiji() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var colorA = "rgb(0, 0, 0)";
var colorB = "빨간색";

var px =Math.sin(deg)*r;
var py =Math.cos(deg)*r;
context.clearRect(0, 0, 300, 300);
context.beginPath();
context.fillStyle = colorA;
context.arc(rl, rl, 60, 0.5 * Math.PI deg, 1.5 * Math.PI deg, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl, rl, 60, 1.5* Math.PI deg, 0.5 * Math.PI deg, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl px, rl-py, 30, 0.5 * Math.PI deg, 1.5 * Math.PI deg, true);
context.closePath();
context.fill();
context.fillStyle = colorA;
context.beginPath();
context.arc(rl-px, rl py, 30, 1.5 * Math.PI deg, 0.5 * Math.PI deg, true);
context.closePath();
context.fill();
context.fillStyle = colorA;
context.beginPath();
context.arc(rl px, rl-py, 8, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl-px, rl py, 8, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
각도 =0.1;
}
setInterval(drawTaiji, 100);

방법이:

复代码如下:

<본문>

브라우저가 캔버스 태그를 지원하지 않습니다

<스크립트 유형="텍스트/자바스크립트">

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
변수 각도 = 0;
변수 개수 = 360;
var clrA = '#000';
var clrB = '빨간색';

함수 타이지(x, y, 반경, 각도, 현명한) {
각도angle = 각도 || 0;
현명하다 = 현명하다? 1: -1;
ctx.save();
ctx.translate(x, y);
ctx.rotate(각도);
ctx.fillStyle = clrA;
ctx.beginPath();
ctx.arc(0, 0, 반경, 0, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(0, 0, 반경, 0, Math.PI, false);
ctx.fill();
ctx.fillStyle = clrB;
ctx.beginPath();
ctx.arc(wise * -0.5 * 반경, 0, 반경 / 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrA;
ctx.arc(wise * 0.5 * 반경, 0, 반경 / 2, 0, Math.PI * 2, false);
ctx.arc(wise * -0.5 * 반경, 0, 반경 / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(wise * 0.5 * 반경, 0, 반경 / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
}

loop = setInterval(함수 () {
startTag = 참;
ctx.clearRect(0, 0, canvas.width, canvas.height);
taiji(200, 200, 50, Math.PI * (각도 / 개수) * 2, true);
//타이지(350, 350, 50, Math.PI * ((개수 - 각도) / 개수) * 2, false);
각도 = (각 5) % 카운트;
}, 50);