当前位置： 移动技术网 > IT编程>网页制作>Html5 > html5中往矩形中贴图片

html5中往矩形中贴图片

2018年09月12日  | 移动技术网IT编程  | 我要评论

机油滤芯粉碎机,化工事故,中国好声音9月21日

分两步：

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

 

2. 画到矩形上的代码
[html]  www.2cto.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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网