效果图：
[img]http://dl2.iteye.com/upload/attachment/0108/8080/476f7b01-a1b3-39c8-81d8-1bc5387d6614.gif[/img]
效果链接：
[url]http://www.108js.com/article/canvas/8/demo.html[/url]
代码：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var dx=0;
//设置字体样式
ctx.font = "40px Courier New";
ctx.textBaseline="top";
var metrics = ctx.measureText("Html5Canvas");
var textWidth = metrics.width;
function drawRect(){
ctx.lineWidth=3;
ctx.strokeText("Html5Canvas", 50, 50);
ctx.lineWidth=1;
ctx.strokeRect(50,50,textWidth,50);
ctx.globalAlpha=0.5;
ctx.fillStyle="green";
ctx.fillRect(50,50,dx,50);
dx+=textWidth/10;
if(dx>=textWidth+textWidth/10) dx=0;
}
loop = setInterval(function () {
//beginTag = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRect();
}, 500);
</script>
</body>
</html>
[img]http://dl2.iteye.com/upload/attachment/0108/8080/476f7b01-a1b3-39c8-81d8-1bc5387d6614.gif[/img]
效果链接：
[url]http://www.108js.com/article/canvas/8/demo.html[/url]
代码：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var dx=0;
//设置字体样式
ctx.font = "40px Courier New";
ctx.textBaseline="top";
var metrics = ctx.measureText("Html5Canvas");
var textWidth = metrics.width;
function drawRect(){
ctx.lineWidth=3;
ctx.strokeText("Html5Canvas", 50, 50);
ctx.lineWidth=1;
ctx.strokeRect(50,50,textWidth,50);
ctx.globalAlpha=0.5;
ctx.fillStyle="green";
ctx.fillRect(50,50,dx,50);
dx+=textWidth/10;
if(dx>=textWidth+textWidth/10) dx=0;
}
loop = setInterval(function () {
//beginTag = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRect();
}, 500);
</script>
</body>
</html>
908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
