canvas(文本)

来源：互联网发布：三国杀卧龙诸葛亮知乎编辑：程序博客网时间：2024/06/05 10:59

<!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>

阅读全文

0 0