问题
I would like to display rotated camera video at a rate of 2 frames/second. The following code displays a 240 x 320 image rotated at 90 degrees. The image does not update unless I refresh the browser. The source that is changing is cam_1.jpg. It seems that once DrawImage has a src image, it does look for an update.
What have I not learned yet? Thank You for your time and expertise.
<title>CamDisplay</title></head><body>
<canvas height="320" width="240"></canvas>
<script type="text/javascript" charset="utf-8">
var cam = new Image;
window.onload = function(){
var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
setInterval(function(){
ctx.save();
ctx.clearRect( 0, 0, 240, 320 );
ctx.translate( 240, 0);
cam.src = 'cam_1.jpg?uniq='+Math.random();
ctx.rotate( 1.57);
ctx.drawImage( cam, 0, 0 );
ctx.restore();
},500);
};
</script>
</body>
</html>
回答1:
the image is not getting time to load. try
var cam = new Image;
var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
cam.onload = function() {
ctx.save();
ctx.clearRect( 0, 0, 240, 320 );
ctx.translate( 240, 0);
ctx.rotate( 1.57);
ctx.drawImage( this, 0, 0 );
ctx.restore();
}
window.onload = function(){
setInterval(function(){
cam.src = 'cam_1.jpg?uniq='+Math.random();
},500);
}
来源：https://stackoverflow.com/questions/9138617/trying-to-use-canvas-and-drawimage-to-display-low-rate-video-at-90-degrees