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