画布像电视屏幕一样工作,你应该重绘每一帧,这样你的代码就不起作用了
<canvas></canvas>
<style type="text/css">
body{height:100%;width:100%;margin:0;padding:0;border:0;}
</style>
<script type="text/javascript">
(function () {
var canvas = document.body.children[0],
docElem = document.documentElement,
h = canvas.height = docElem.clientHeight,
w = canvas.width = docElem.clientWidth,
ctx = canvas.getContext("2d"),
timeout = 33,
hc = h/2,
wc = w/2,
spd = 5;
//console.log( ctx );
function clear ( ) {
ctx.fillRect ( 0, 0, w, h );
}
function update ( ) {
clear();
moveLeft();
}
function moveLeft ( ) {
ctx.beginPath();
ctx.moveTo ( wc, hc );
ctx.lineTo ( wc = wc - spd, hc );
ctx.closePath();
ctx.stroke();
}
function init ( ) {
ctx.lineWidth = 5;
ctx.strokeStyle = "rgb(255,255,255)";
// fade mask style
// this is a very simply demo so i use this
ctx.fillStyle = "rgba(0,0,0,0.3)";
setInterval ( update , timeout );
}
init();
})()
</script>