案例1:

<!DOCTYPE html><br/><html><br/><head lang="en"><br/>    <meta charset="UTF-8"><br/>    <title></title><br/>    <script><br/>     window.onload=function(){<br/>            var c=document.getElementById("myCanvas");<br/>            var cxt= c.getContext("2d");<br/>            var image= new Image();<br/>            image.src="shanchu.png";<br/>            cxt.drawImage(image,0,0);<br/>        }<br/>    </script><br/></head><br/><body><br/><canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持<br/></canvas>

</body><br/></html>

效果图:

注释:

(1)绘制图像时,需要使用drawImage方法:

方法1:cxt.drawImage(image,x,y);

image是一个Image对象,用该对象来装载图像文件。x与y为绘制时该图像在画布中的起始坐标。

方法2:cxt.drawImage(image,x,y,w,h);

前三个参数同上,w,h是指绘制时的图像的宽度与高度。

方法3:cxt.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

sx与sy分别表示源图像的被复制区域在画布中的起始横坐标与起始纵坐标,sw与sh表示被复制区域的宽度与高度,dx与dy表示复制后的目标图像在画布中的起始横坐标与起始纵坐标,dw与dh表示复制后的目标图像的宽度与高度。该方法可以只复制图像的局部,只要将sx与sy设为局部区域的起始点坐标,将sw与sh设为局部区域的宽度与高度就可以了。

案例2:
<!DOCTYPE html><br/><html><br/><head lang="en"><br/>    <meta charset="UTF-8"><br/>    <title></title><br/>    <script><br/>     window.onload=function(){<br/>            var c=document.getElementById("myCanvas");<br/>            var cxt= c.getContext("2d");<br/>            var image= new Image();<br/>            image.src="shanchu.png";<br/>            cxt.drawImage(image,0,0,200,200);<br/>            cxt.drawImage(image,0,0,100,100,210,0,200,200);<br/>        }<br/>    </script><br/></head><br/><body><br/><canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持<br/></canvas>

</body><br/></html>

效果图:<br/><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL2ltYWdlczAuY25ibG9ncy5jb20vYmxvZzIwMTUvNzQxNzU3LzIwMTUwNC8xNjEwMjI1OTU1NzM2MTIucG5n.jpg"/>

案例3:
<!DOCTYPE html><br/><html><br/><head lang="en"><br/>    <meta charset="UTF-8"><br/>    <title></title><br/>    <script><br/>     window.onload=function(){<br/>            var c=document.getElementById("myCanvas");<br/>            var cxt= c.getContext("2d");<br/>            var image= new Image();<br/>            image.src="shanchu.png";<br/>            drawImage(cxt,image);<br/>        }<br/>     function drawImage(cxt,image)<br/>     {<br/>         var i=0;<br/>         for(i=0;i<5;i++)<br/>         {<br/>             cxt.drawImage(image,0+i*50,0+i*30,100,100);<br/>         }<br/>      }<br/>    </script><br/></head><br/><body><br/><canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持<br/></canvas>

</body><br/></html>

效果图:
<img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL2ltYWdlczAuY25ibG9ncy5jb20vYmxvZzIwMTUvNzQxNzU3LzIwMTUwNC8xNjEwMzg1NjM4NTUxMjkucG5n.jpg"/>

<strong>图像平铺<br/></strong><br/>案例1:
<!DOCTYPE html><br/><html><br/><head lang="en"><br/>    <meta charset="UTF-8"><br/>    <title></title><br/>    <script><br/>     window.onload=function(){<br/>            var c=document.getElementById("myCanvas");<br/>            var cxt= c.getContext("2d");<br/>            var image= new Image();<br/>            image.src="shanchu.png";<br/>            var ptrn=cxt.createPattern(image,'repeat');<br/>            cxt.fillStyle=ptrn;<br/>            cxt.fillRect(0,0,450,350);<br/>        }<br/>    </script><br/></head><br/><body><br/><canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持<br/></canvas>

</body><br/></html>
效果图:<br/><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL2ltYWdlczAuY25ibG9ncy5jb20vYmxvZzIwMTUvNzQxNzU3LzIwMTUwNC8xNjEwNTgwMDYyMDgwOTMucG5n.jpg"/>

注释:<br/>(1)cxt.createPattern(image,type);<br/>         该方法使用两个参数,image参数为要平铺的图像,type参数的值必须是下面的字符串值之一:<br/>         no-repeat:不平铺<br/>         repeat-x:横方向平铺<br/>         repeat-y:纵方向平铺<br/>         repeat:全方向平铺