ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำสองตัวอย่างโค้ดของภาพเคลื่อนไหวการหมุนของ HTML5 Canvas และตระหนักถึงเอฟเฟกต์ไดอะแกรม Tai Chi ที่หมุนได้ เพื่อนที่เรียนรู้แอนิเมชั่นการหมุนของ HTML5 Canvas สามารถอ้างถึงได้
ภาพการทำซ้ำ:
วิธีที่ 1:
<html>
<body>
<Banvas> y เบราว์เซอร์ไม่รองรับแท็ก Canvas </anvas>
<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 ();
บริบท fillstyle = colora;
Context.arc (RL, RL, 60, 0.5 * Math.pi +DEG, 1.5 * Math.pi +DEG, TRUE);
บริบท closepath ();
Context.fill ();
บริบท fillstyle = colorb;
Context.BeginPath ();
Context.arc (RL, RL, 60, 1.5 * Math.pi +DEG, 0.5 * Math.pi +DEG, TRUE);
บริบท closepath ();
Context.fill ();
บริบท fillstyle = colorb;
Context.BeginPath ();
context.arc (RL + PX, RL-PY, 30, 0.5 * math.pi + deg, 1.5 * math.pi + deg, true);
บริบท closepath ();
Context.fill ();
บริบท fillstyle = colora;
Context.BeginPath ();
context.arc (rl-px, rl + py, 30, 1.5 * math.pi + deg, 0.5 * math.pi + deg, true);
บริบท closepath ();
Context.fill ();
บริบท fillstyle = colora;
Context.BeginPath ();
context.arc (rl+px, rl-py, 8, 0, 2 * math.pi, true);
บริบท closepath ();
Context.fill ();
บริบท fillstyle = colorb;
Context.BeginPath ();
context.arc (rl-px, rl+py, 8, 0, 2 * math.pi, true);
บริบท closepath ();
Context.fill ();
deg += 0.1;
-
setInterval (drawtaiji, 100);
</script> </p> <p> </body>
</html>
วิธีที่ 2:
<! doctype html>
<html>
<body>
<Canvas> เบราว์เซอร์ของคุณไม่รองรับแท็ก Canvas </anvas>
<script type = "text/javascript">
var canvas = document.getElementById ('mycanvas');
var ctx = canvas.getContext ("2d");
มุม var = 0;
count var = 360;
var clra = '#000';
var clrb = 'สีแดง';
ฟังก์ชั่น taiji (x, y, รัศมี, มุม, ฉลาด) {
AngleAngle = มุม || 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, เท็จ);
ctx.fill ();
ctx.fillstyle = clrb;
ctx.beginpath ();
ctx.arc (ฉลาด * -0.5 * รัศมี, 0, รัศมี / 2, 0, math.pi * 2, จริง);
ctx.fill ();
ctx.beginpath ();
ctx.fillstyle = clra;
ctx.arc (ฉลาด * +0.5 * รัศมี, 0, รัศมี / 2, 0, math.pi * 2, เท็จ);
ctx.arc (ฉลาด * -0.5 * รัศมี, 0, รัศมี / 10, 0, math.pi * 2, จริง);
ctx.fill ();
ctx.beginpath ();
ctx.fillstyle = clrb;
ctx.arc (ฉลาด * +0.5 * รัศมี, 0, รัศมี / 10, 0, math.pi * 2, จริง);
ctx.fill ();
ctx.restore ();
-
loop = setInterval (ฟังก์ชัน () {
Begintag = true;
ctx.clearrect (0, 0, canvas.width, canvas.height);
Taiji (200, 200, 50, math.pi * (มุม / นับ) * 2, true);
// taiji (350, 350, 50, math.pi * ((นับ - มุม) /นับ) * 2, เท็จ);
มุม = (มุม + 5) % นับ;
}, 50);
</script> </p> <p> </body>
</html>