Canvas新增一個背景圖片，讓字型在背景圖片上從左向右滾動
阿新 • • 發佈：2019-02-05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <style> canvas { border:1px solid #ccc; } </style> <body> <canvas id="canvas" width="450" height="360"></canvas> <script> var canvas = document.getElementById("canvas"), r = 10, ctx = canvas.getContext("2d"), img = new Image(); img.src = "http://images.17173.com/2010/newgame/2010/07/08/allan07081500_11s.jpg"; img.onload = function() { ctx.drawImage(img, 0, 0); } var moveToRight = function() { ctx.drawImage(img, 0, 0); ctx.globalCompositeOperation = "source-over"; ctx.font = "30px 黑體"; ctx.textAlign = "center"; ctx.fillStyle = "#000000"; ctx.fillText("textAlign=center", r, 200); r = r + 10; } setInterval(moveToRight, 200); </script> </body> </html>