2 contoh kod animasi putaran Kanvas HTML5 (kesan Tai Chi berputar)_html5 kemahiran tutorial

效果图：

方法一：

复制代码 代码如下: 复制代码

代码如下: penyemak imbas anda tidak menyokong teg kanvas var deg = 0; var r = 30; var rl = 100; function drawTaiji() { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var colorA = "rgb(0, 0, 0)"; var colorB = "merah";

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

方法二： 复制代码 代码如下:

penyemak imbas anda tidak menyokong teg kanvas var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext("2d"); sudut var = 0; kiraan var = 360; var clrA = '#000'; var clrB = 'merah';

fungsi taiji(x, y, jejari, sudut, bijak) { sudut = sudut || 0; bijak = bijak ? 1: -1; ctx.save(); ctx.translate(x, y); ctx.rotate(sudut); ctx.fillStyle = clrA; ctx.beginPath(); ctx.arc(0, 0, jejari, 0, Math.PI, benar); ctx.fill(); ctx.beginPath(); ctx.fillStyle = clrB; ctx.arc(0, 0, jejari, 0, Math.PI, palsu); ctx.fill(); ctx.fillStyle = clrB; ctx.beginPath(); ctx.arc(bijak * -0.5 * jejari, 0, jejari / 2, 0, Math.PI * 2, benar); ctx.fill(); ctx.beginPath(); ctx.fillStyle = clrA; ctx.arc(bijak * 0.5 * jejari, 0, jejari / 2, 0, Math.PI * 2, palsu); ctx.arc(bijak * -0.5 * jejari, 0, jejari / 10, 0, Math.PI * 2, benar); ctx.fill(); ctx.beginPath(); ctx.fillStyle = clrB; ctx.arc(bijak * 0.5 * jejari, 0, jejari / 10, 0, Math.PI * 2, benar); ctx.fill(); ctx.restore(); }

gelung = setInterval(fungsi () { beginTag = benar; ctx.clearRect(0, 0, canvas.width, canvas.height); taiji(200, 200, 50, Math.PI * (sudut / kiraan) * 2, benar); //taiji(350, 350, 50, Math.PI * ((kiraan - sudut) / kiraan) * 2, palsu); sudut = (sudut 5) % kiraan; }, 50);