html/html5 案例 - W3xue在线HTML/CSS/JS运行工具

​x
 
<!DOCTYPE html>
<html>
<body>
​
<p>要使用的图片：</p>
​
<img src="/img/eg_tulip.jpg" alt="tulip" id="tulip" style="margin-left:0px;" />
​
<p>Canvas:</p>
​
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
​
<script>
document.getElementById("tulip").onload=function(){
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  var img=document.getElementById("tulip");
  ctx.drawImage(img,90,130,90,80,20,20,90,80);
};
</script>
​
</body>
</html>
​