读书人

html5中去矩形中贴图片

发布时间: 2012-08-10 12:19:33 作者: rapoo

html5中往矩形中贴图片

分两步:


1. 画布大小就是矩形的大小

<!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>




读书人网 >CSS

热点推荐