主要用到的就2個關鍵技術點:
ctx.globalAlpha = ‘0.85’; //設置主canvas的繪制透明度 臨時canvas備份主canvas的歷史圖像,再疊加到主canvas上。
繪制過程:
首先需要知道動畫的起終點,然後繪制移動的圓,計算出中間的點的位置,定時繪制,每次繪制都移動一點位置,達到運動的效果,這是普通的運動的圓的效果。
繪制的時候設置當前canvas的透明度globalAlpha 為0.85
需要給運動中的圓加上運動過程的軌跡效果,這裡是用到一個臨時的canvas來配合,每次需要繪制一個新圓之前都把之前的圖像給繪制到臨時的canvas中,然後等新圓畫完後再把臨時canvas的圖像繪制回主canvas中,軌跡的效果。
這裡關鍵的就是由於設置瞭globalAlpha,每次繪制一次備份的canvas圖片都會把它的透明度設為0.85,達到瞭逐漸減小透明度的效果,直到為0,這樣整體看上去效果就是運動的圓的後面跟的圓逐個透明度減小,知道為0,達到瞭運動軌跡的效果。
movecircle.js
var canvas = document.querySelector('#canvas'), ctx = canvas.getContext('2d'); canvas.width = 400; canvas.height = 400; var backDom = document.createElement('canvas'), backCtx = backDom.getContext('2d'); backDom.width = canvas.width; backDom.height = canvas.height; document.body.appendChild(backDom); //測試使用 ctx.globalAlpha = 0.85; //關鍵 function draw(options) { backCtx.globalCompositeOperation = 'copy'; backCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(options.x, options.y, options.r, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = 'rgba(7,120,249,1)'; ctx.fill(); ctx.drawImage( backDom, 0, 0, backDom.width, backDom.height); } var start = { x: 25, y: 25, r: 10 }; var end = { x: 300, y: 300, r: 10 }; function render() { if (start.x < end.x && start.y < end.y) { draw(start); start.x += 5; start.y += 5; setTimeout(arguments.callee, 50); } } render();
index.html
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ padding:0; margin:0; background:#000; } #main{ height:100%; } canvas { border:1px solid red; } </style> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript" src="js/movecircle.js"> </script> </body> </html>