当前位置:编程学习 > html/css >>

html5中往矩形中贴图片

分两步:

1. 画布大小就是矩形的大小
[html] 
<body onload="drawRect();"> 
   <canvas id="canvas" width="100" height="500"> 
    aaa 
    </canvas> 
</body> 

 

2. 画到矩形上的代码
[html]  www.zzzyk.com
<script> 
   var IMG_SRC = "./1.jpg"; 
    function drawRect() { 
       var canvas = document.getElementById("canvas"); 
       var context = canvas.getContext("2d"); 
       //context.strokeRect(50, 50, 120, 120); 
 
       var img=new Image(); 
        //图像被装入后触发 
        img.onload=function(){ 
        context.drawImage(img,0,0); 
        } 
        img.src=IMG_SRC; 
    } 
</script> 

全部代码:
[html] 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>HTML5 Canvas Sample</title> 
 
 <script> 
    var IMG_SRC = "./1.jpg"; 
     function drawRect() { 
        var canvas = document.getElementById("canvas"); 
        var context = canvas.getContext("2d"); 
        //context.strokeRect(50, 50, 120, 120); 
 
        var img=new Image(); 
         //图像被装入后触发 
         img.onload=function(){ 
         context.drawImage(img,0,0); 
         } 
         img.src=IMG_SRC; 
     } 
 </script> 
</head> 
 
<body onload="drawRect();"> 
   <canvas id="canvas" width="100" height="500"> 
    aaa 
    </canvas> 
   <canvas id="canvas1" width="500" height="500"> 
    bbb 
    </canvas> 
 
</body> 
 
</html> 


作者:xiaocaiju
补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,