Canvas

最新推荐文章于 2023-10-30 23:25:34 发布

lein_wang

最新推荐文章于 2023-10-30 23:25:34 发布

阅读量572

点赞数

分类专栏： js/jquery/css 文章标签： image c

本文链接：https://blog.csdn.net/lein_wang/article/details/7850639

版权

js/jquery/css 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

  <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.οnlοad=function(){
	draw();
}
  //-->
  </script>
 
 </body>
</html>