댓글 :이 기사는 주로 HTML5 Canvas 회전 애니메이션의 두 가지 코드 예제를 소개하고 회전하는 타이치 다이어그램 효과를 실현합니다. html5 캔버스 회전 애니메이션을 배우는 친구가 그것을 참조 할 수 있습니다.
생식 이미지 :
방법 1 : 방법 1
<html>
<body>
<canvas> y 브라우저는 캔버스 태그 </canvas>를 지원하지 않습니다
<script type = "text/javaScript">
var deg = 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 ();
deg += 0.1;
}
SetInterval (Drawtaiji, 100);
</script> </p> <p> </body>
</html>
방법 2 : 방법 2.
<! doctype html>
<html>
<body>
<canvas> 브라우저는 캔버스 태그를 지원하지 않습니다 </canvas>
<script type = "text/javaScript">
var canvas = document.getElementById ( 'mycanvas');
var ctx = canvas.getContext ( "2d");
var angle = 0;
var count = 360;
var clra = '#000';
var clrb = '빨간색';
기능 taiji (x, y, 반경, 각도, 현명한) {
앵글 레글 = 각도 || 0;
WiseWise = 현명한? 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 (function () {
begintag = true;
ctx.clearrect (0, 0, canvas.width, canvas.height);
taiji (200, 200, 50, Math.pi * (각도 / 수) * 2, true);
// taiji (350, 350, 50, math.pi * ((count -angle) /count) * 2, false);
각도 = (각도 + 5) % 카운트;
}, 50);
</script> </p> <p> </body>
</html>