您可以使用合成将绘图限制在电视屏幕上
优点：
- 这里只有 canvas 元素——无需将 img+canvas 与 CSS 协调。
- 您可以绘制到非矩形电视屏幕上。
- 您可以像“视口”一样使用电视屏幕。
- 如果调整大小，保持视口正确定位会更简单。
它是这样工作的：
在画布上绘制电视图像：
ctx.drawImage(tv,0,0,tv.width,tv.height);
这张电视图像的重要之处在于屏幕具有透明像素
在你在屏幕上绘制任何东西之前，将合成设置为“destination-over”。这会导致画布保留已在屏幕（电视）上绘制的任何非透明像素，并且仅绘制到透明像素（您的电视屏幕）中。
结果：你只是在电视屏幕上画画。电视的其余部分被保留。
ctx.globalCompositeOperation="destination-over";
这是代码和小提琴：http: //jsfiddle.net/m1erickson/7JPrx/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: white; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var tv=new Image();
var land=new Image();
tv.onload=function(){
land.onload=function(){
draw();
}
land.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape.png";
}
tv.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/tv1.png";
var offsetX=0;
function draw(){
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// draw the tv
// NOTE: the screen of the tv must be transparent
ctx.drawImage(tv,0,0,tv.width,tv.height);
// begin drawing the screen
ctx.save();
ctx.beginPath();
// this causes any drawing to ONLY draw over transparent pixels
// that's how we draw within the screen because
// the screen is the only part of the tv with transparent pixels
ctx.globalCompositeOperation="destination-over";
// move (translate) our drawing to the screen part of the tv image
ctx.translate(32,95);
// draw the landscape scrolling across the screen (using offsetX)
ctx.drawImage(land,offsetX,0);
// reset
ctx.restore();
offsetX-=10;
if(offsetX<=-600){offsetX=0;}
setTimeout(draw,100);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>