التعليق: يقدم هذا المقال بشكل أساسي مثالين رمزين على الرسوم المتحركة HTML5 Canvas Rotation ، ويدرك تأثير مخطط Tai Chi الدوار. يمكن للأصدقاء الذين يتعلمون HTML5 Canvas Rotation الرسوم المتحركة الرجوع إليها.
صورة التكاثر:
الطريقة 1:
<html>
<body>
<Canvas> Y Browser لا يدعم علامة القماش </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 = "Red" ؛
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) ؛
</script> </p> <p> </body>
</html>
الطريقة 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 = 'Red' ؛
وظيفة taiji (x ، y ، نصف قطرها ، زاوية ، حكيمة) {
AngleAngle = Angle || 0 ؛
Wisewise = حكيم؟ 1: -1 ؛
ctx.save () ؛
ctx.translate (x ، y) ؛
ctx.rotate (زاوية) ؛
ctx.fillstyle = clra ؛
ctx.beginpath () ؛
CTX.ARC (0 ، 0 ، RADIUS ، 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 * RADIUS ، 0 ، RADIUS / 2 ، 0 ، MATH.PI * 2 ، true) ؛
ctx.fill () ؛
ctx.beginpath () ؛
ctx.fillstyle = clra ؛
ctx.arc (wise * +0.5 * radius ، 0 ، RADIUS / 2 ، 0 ، Math.pi * 2 ، false) ؛
CTX.ARC (WISE * -0.5 * RADIUS ، 0 ، RADIUS / 10 ، 0 ، MATH.PI * 2 ، true) ؛
ctx.fill () ؛
ctx.beginpath () ؛
ctx.fillstyle = clrb ؛
ctx.arc (wise * +0.5 * radius ، 0 ، radius / 10 ، 0 ، math.pi * 2 ، true) ؛
ctx.fill () ؛
ctx.restore () ؛
}
loop = setInterval (function () {
begintag = صحيح ؛
ctx.clearrect (0 ، 0 ، canvas.width ، canvas.height) ؛
Taiji (200 ، 200 ، 50 ، Math.pi * (angle / count) * 2 ، true) ؛
// Taiji (350 ، 350 ، 50 ، Math.pi * ((count - angle) /count) * 2 ، false) ؛
زاوية = (زاوية + 5) ٪.
} ، 50) ؛
</script> </p> <p> </body>
</html>