HTML5之drawImage函数

来源：互联网发布：东方挂馅炒饭知乎编辑：程序博客网时间：2024/06/05 14:29

可用函数

drawImage(image, x, y) //按原图片大小绘制。
drawImage(image, x, y, width, height) //按指定大小绘制。
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight) //常用于图片裁剪。

参数

image:所要绘制的图像。这必须是表示标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。
x和y：图片在文档中的坐标位置。
width和height：图片的宽高。
对于drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight) 常用有图片的裁剪。其参数含义是原来image上从某一个位置开始(sourceX,sourceY)，指定长宽进行剪切(sourceX,sourceY),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上，当然裁剪后的会覆盖原来的图片。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>drawImage</title></head><body>    <canvas id="myCanvas" width="500" height="400"></canvas>    <script type="text/javascript">        var canv=document.getElementById("myCanvas");        var ctx = canv.getContext("2d");            img = new Image();            img.src = "2.jpg";        //当图片加载完毕的时候在drawImage,否则可能图片还没有加载完毕        //当然画不上去喽，这就和浏览器的性能有关了。            img.onload=function(){                ctx.drawImage(img,0,0,500,500);            //ctx.drawImage(img,0,0,100,100,300,100,100,100);            }    </script></body></html>

除此之外，drawImage()还可以画video

参考链接

0 0