Canvas
<canvas id="myCanvas" width="200" height="600"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#aaa";
cxt.fillRect(100,10,100,575);
</script>fillRect(px,py,x,y); //参数px，py是从画布左上角开始的坐标，x，y就是长和宽。
有一篇翻译的文章很不错：
https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial/Using_images
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<ul>
<li><img src="Firefox-logo.png"></img></li>
<li><img src="Firefox-logo.png"></img></li>
<li><img src="Firefox-logo.png"></img></li>
<li><img src="Firefox-logo.png"></img></li>
<li><img src="Firefox-logo.png"></img></li>
<li><img src="Canvas_picture_frame.png" id="frame"></img></li>
</ul>
<script type="text/javascript">
<!--
function draw() {
// Loop through all images
for (i=0;i<document.images.length;i++){
// Don't add a canvas for the frame image
if (document.images[i].getAttribute('id')!='frame'){
// Create canvas element
canvas = document.createElement('CANVAS');
canvas.setAttribute('width',132);
canvas.setAttribute('height',150);
// Insert before the image
document.images[i].parentNode.insertBefore(canvas,document.images[i]);
ctx = canvas.getContext('2d');
// Draw image to canvas
ctx.drawImage(document.images[i],15,20);
// Add frame
ctx.drawImage(document.getElementById('frame'),0,0);
}
}
}
window.onload=function(){
draw();
}
//-->
</script>
</body>
</html>
