HTML5动画----canvas基础7（嵌入图像）

嵌入图像： drawImage()

<script type="text/javascript">
//1.确定图像的来源2.使用drawImage()将图像绘制到canvas中
//一、图片的来源有4种：
//1.页面内的图片：已知图片元素的ID,可通过document.images集合、document.getElementsByTagName()方法或getElementById（）获取该图片元素
//2.其他canvas元素：document.getElementsByTagName()方法或getElementById（）获取该canvas元素
//3.用脚本创建一个Image对象：若图片来源于网络且体积大，则需要花费长时间装载，如果不希望等待装载，则要做好预装载的工作
//4.使用data:url引用图像：允许用Base64编码的字符串来定义一个图片，图片可以即使使用，不必等待装载，若图片较大就不适合这种，会导致嵌入的url数据相当庞大
//二、drawImage()的三种用法
//context.drawImage(image,x,y);//image:image对象、canvas对象，x,y表示要绘制到的起始位置的坐标
//context.drawImage(image,x,y,width,height);//width,heigh表示图像在canvas中显示的宽度和高度
//context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);//用于创建图像切片，
//sx,sy,sw,sh,源图像切割区的起始坐标(相对源图像的坐标，并不是源图像域在canvas中所处的坐标)，以及被切下来的宽高；dx,dy,dw,dh放置到目标canvas的起始坐标以及到目标canvas显示的宽高
   function draw(){
       var ctx=document.getElementById("myCanvas").getContext('2d');
       //1. 填充图案 ctx.fillStyle=ctx.createPattern()
//       var img2=new Image();
//       img2.src='img/4.jpeg';
//       img2.οnlοad=function(){
//           var ptrn=ctx.createPattern(img2,'no-repeat');//创建图案
//            ctx.fillStyle=ptrn;
//            ctx.fillRect(0,0,1230,330)
//       }
 //2.绘制图像           ctx.drawImage(img,0,0); 
         var img=new Image();
        img.onload = function(){//预装载：一边装载图像一边绘制
//           ctx.drawImage(img,0,0);//采用图片原始大小
        ctx.drawImage(img,0,0,500,200);//指定图像大小
             ctx.font="italic 60px Arial Black";
             ctx.shadowOffsetX =3;
             ctx.shadowOffsetY = 3;
             ctx.shadowBlur = 2;
//          ctx.globalAlpha = "0.4";//设置文字透明度
           ctx.fillStyle='rgba(0,0,0,0.4)';设置文字透明度
             ctx.shadowColor ="ragb(0,0,0,0.7)";
             ctx.fillText("COOL",50,165);  
         }
         img.src='img/2.jpeg';

//图像切片
         var img2=new Image();
         img2.οnlοad=function(){
               ctx.drawImage(img2,0,210);
             //  ctx.drawImage(img2,0,210,200,330,0,520,200,330);//错误sx\sy的坐标错误，并不是相对canvas来定义sy坐标
               ctx.drawImage(img2,0,0,200,330,0,520,200,330);//用于创建图像切片，
         }
        img2.src='img/4.jpeg';     
   }
   window.οnlοad=function(){
       draw();
   }
        </script>
    <canvas id="myCanvas" width="1300" height="1200"></canvas>