隨著HTML5的不斷發展,javascript的應用也越來越廣泛。特別是用javascript實現的一些動態效果,為網頁的設計增色不少。接下來我們來探討如何用HTML5實現鼠標的特效代碼。
<canvas id="canvas" width="800" height="600"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var mouseX, mouseY; canvas.addEventListener('mousemove', function(event) { mouseX = event.clientX; mouseY = event.clientY; }, false); function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); var x = mouseX; var y = mouseY; ctx.beginPath(); ctx.arc(x, y, 20, 0, Math.PI * 2, true); ctx.closePath(); ctx.lineWidth = 5; ctx.strokeStyle = '#f00'; ctx.stroke(); requestAnimationFrame(animate); } animate(); </script>
以上代碼實現了一個非常簡單的鼠標特效——鼠標移動時,canvas畫布上出現圓形的跟隨效果,有了這樣的特效,可以增加網頁的互動性和持久性。其中使用了HTML5中的<down>和<canvas>標簽,通過javascript實現了鼠標事件監聽和動畫效果。這種鼠標特效,在現代web設計中經常被使用,通過不斷探索和使用,我們可以將原來的動態效果提升到一個更高的水平。
上一篇web個人簡歷css樣式
下一篇webkit css屬性