canvas(文本)

xiaoxiao2021-02-28  3

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas{ background: #ddd; } </style> </head> <body> <h3>canvas绘图 ——文本</h3> <canvas id="c2" width="500" height="400"> <script> var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); ctx.textBaseline="top"; var str="abcxyz"; ctx.font="30px SimHei"; ctx.fillText(str,0,0); </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"; 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>

转载请注明原文地址: https://www.6miu.com/read-1750145.html

最新回复(0)