<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas{ background: #ddd; } </style> </head> <body> <canvas id="c2" width="500" height="400"></canvas> <script> var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); ctx.textBaseline="top"; var str="spf"; ctx.font="30px SimHei"; ctx.fillText(str,0,0); var tWidth=ctx.measureText(str).width; ctx.fillText(str,500-tWidth,0); ctx.fillText(str,0,400-30); ctx.fillText(str,500-tWidth,400-30); ctx.fillText(str,250-tWidth/2,200-15); </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas{ background: #ddd; } </style> </head> <body> <canvas id="c2" width="500" height="400"></canvas> <script> var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); ctx.textBaseline="top"; var str="spf"; var x=0; var xDir=1; ctx.font="30px SimHei"; ctx.fillText(str,x,0); var tWidth=ctx.measureText(str).width; setInterval(function(){ x += 5*xDir; ctx.clearRect(0,0,500,400); ctx.fillText(str,x,0); if(x<0){ xDir=1; } if(x>(500-tWidth)){ xDir=-1; } },100); </script> </body> </html>
