html5中往矩形中贴图片

分两步：

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>  

分两步：

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>  

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！