绘制图像, 需要使用 drawImage 方法.
- context.drawImage(image,x,y);
- context.drawImage(image,x,y,w,h);
- context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
第一种方法有三个参数, image 是一个 image 对象, 该对象来装载图像文件, x 与 y 为绘制时该图像在画布中的起始坐标.
绘制图像时, 首先使用不带参数的 new 方法创建 image 对象, 然后设定该 image 对象的 src 属性为需要绘制的图像文件的路径.
image=new Image(),
image.src="image1.jpg". 设置图像路径.
既使设定好 image 对象的 src 属性后, 也不一定立刻就能把图像绘制完毕, 譬如有时候该图像文件来自网络的比较大的图像文件, 这时候用户就要耐心等待图像全部装载完毕才能看到图像. 这种情况下只能使用 imag.onload=function(){绘制图像的函数}. 这样就会在 image 对象的 onload 事件中同步执行绘制图像的函数就可以一边装载一边绘制了.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 绘制图像 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- var canvas=document.getElementById("canvas");
- var context=canvas.getContext("2d");
- context.strokeStyle="#ee33ee";
- context.lineWidth="5";
- context.strokeRect(0,0,500,500);
- // 绘制图像
- var image=new Image();
- image.src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy" +
- "/it/u=40765800,3598302294&fm=27&gp=0.jpg";
- image.onload=function () {
- context.drawImage(image,100,100);
- }
- </script>
- </body>
- </html>
第二种方法中的前三个参数的使用方法和第一种方法中的一样, w,h 是指绘制时图像的宽度与高度. 可以缩放图像.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 绘制图像 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- var canvas=document.getElementById("canvas");
- var context=canvas.getContext("2d");
- context.strokeStyle="#ee33ee";
- context.lineWidth="5";
- context.strokeRect(0,0,500,500);
- // 绘制图像
- var image=new Image();
- image.src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy" +
- "/it/u=40765800,3598302294&fm=27&gp=0.jpg";
- image.onload=function () {
- // 原图像是 300*300
- context.drawImage(image,100,100,400,400);
- }
- </script>
- </body>
- </html>
第三种方法可以用来将画布中已经绘制好的图像的全部或者局部区域复制到画布的另一位置上. 该方法有九个参数, image 表示图像文件, sw 与 sy 分别表示复制原图像的被复制区域在画布中的起始横坐标与起始纵坐标, sw 与 sh 表示被复制区域的宽度与高度, dx 与 dy 表示复制后的目标图像在画布中的起始横坐标与起始纵坐标. 该方法可以只复制局部只要将 sx 与 sy 设为局部区域的起始点坐标, 将 sw 与 sh 设为局部区域的宽度与高度就可以了. 该方法也可以缩放图像, 只要将 dw 与 dh 设为缩放后的宽度与高度就行了.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 复制放大 </title>
- </head>
- <body>
- <canvas id="canvas" width="1000" height="1000">
- </canvas>
- <script>
- var canvas=document.getElementById("canvas");
- var context=canvas.getContext("2d");
- context.strokeStyle="#ee33ee";
- context.lineWidth="5";
- context.strokeRect(0,0,1000,1000);
- // 复制放大图像
- var image=new Image();
- image.src="http://img1.gtimg.com/20/2055/205572/20557202_1200x1000_0.jpg";
- image.onload=function () {
- // 原图像是 300*300
- context.drawImage(image,0,0,300,500);
- context.drawImage(image,160,70,200,200,500,0,500,500);
- }
- </script>
- </body>
- </html>
例子:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 图像例子 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- var canvas=document.getElementById("canvas");
- var context=canvas.getContext("2d");
- context.strokeStyle="rgb(255,0,0)";
- context.strokeRect(0, 0, 500, 500);
- var image=new Image();
- image.src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3483712804,2789478993&fm=27&gp=0.jpg"
- image.onload=function(){
- drawimg(context,image);
- }
- function drawimg(context,image){
- for(var i=0;i<6;i++){
- context.drawImage(image,10+i*67,10+i*75,150,100);
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/note/49226/1b9f334846642e5d1e9b7890052f80cf.html