接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续，本文介绍的内容是canvas开发，特别是游戏中，比较常用的内容：图片处理。在游戏中的资源大多数都是加载图片.
一、canvas怎么加载图片？
canvas提供3种图片加载的API调用方式.
drawImage( image, dx, dy )
drawImage( image, dx, dy, dw, dh )
drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh )
image:就是图片对象， 这个图片对象可以是动态创建出来的，也可以是页面上已经存在的图片元素
dx, dy: 就是图片需要加载到canvas上的坐标位置
dw,dh：如果加载之后的图片尺寸不对，可以通过这两个参数，调整宽度与高度
sx,sy,sw,sh: s就是source的意思，这四个参数是第三种调用方式特有的， 第三种调用方式就是允许裁剪图片的某部分，然后在加载到canvas画布上.
1，动态创建图片
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function(){
oGc.drawImage( oImg, 100, 100 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
对于动态创建的图片对象，一定要用onload把这张图片加载完成之后，才能渲染在canvas上，否则是不会渲染的.
2，把页面上已经存在的图片加载进来
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
oImg = document.querySelector( "img" );
oGc.drawImage( oImg, 100, 100 );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<img src="./img/mv.jpg" alt="">
</body>
页面上已经存在的图片，是不需要加载的，因为他已经加载出来了，用选择器直接获取就可以加载到canvas中.
3，调整图片大小
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
oImg = document.querySelector( "img" );
oGc.drawImage( oImg, 100, 100, 100, 100 );
这张图片的原始尺寸是200x200，加载到canvas中，把他调整成100x100
如果是动态创建的图片，也没有问题
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function(){
oGc.drawImage( oImg, 100, 100, 100, 100 );
}
4，裁剪某部分图片，再渲染到canvas上面
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function(){
oGc.drawImage( oImg, 20, 20, 100, 100, 100, 100, 100, 100 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
从原图的20, 20这个位置，裁剪出100 x 100这个区域，再渲染到canvas.
二、图片的平铺
css的background有平铺样式background-repeat，他有4个值( no-repeat【不平铺】, repeat-x【水平平铺】，repeat-y【垂直平铺】，repeat【水平和垂直两个方向都平铺】）。
canvas跟这个是类似的，用法：
var pattern = cxt.createPattern( image, type )
cxt.fillStyle = pattern
cxt.fillRect()
image就是图片对象，type就是平铺样式( no-repeat, repeat-x, repeat-y, repeat ).
fillStyle可以给它赋3种值：颜色、图案、渐变色。颜色在之前已经使用过很多次了.
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function(){
var pattern = oGc.createPattern( oImg, 'repeat' );
oGc.fillStyle = pattern;
oGc.fillRect( 0, 0, width, height );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
repeat-x:
repeat-y
no-repeat:
用canvas填充canvas：
创建一个新的canvas，width:200,height:200, 然后再创建一个原心100, 100，半径100的圆，用这个圆作为填充样式填充到canvas.
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; var oNewCanvas = document.createElement( "canvas" );
oNewCanvas.width = 200,
oNewCanvas.height = 200,
oNewGc = oNewCanvas.getContext( '2d' );
oNewGc.beginPath();
oNewGc.fillStyle = '#09f';
oNewGc.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false );
oNewGc.closePath();
oNewGc.fill(); var pattern = oGc.createPattern( oNewCanvas, 'repeat' );
oGc.fillStyle = pattern;
oGc.fillRect( 0, 0, width, height );
}
</script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
三、切割图片clip
用法：
cxt.clip()
步骤：
1，绘制剪切区域
2，调用裁剪方法clip
3，加载被剪切的素材(图片或者图形等)
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; oGc.beginPath();
oGc.arc( 200, 200, 100, 0, 360 * Math.PI / 180, false );
oGc.closePath(); oGc.clip(); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function(){
oGc.drawImage( oImg, 100, 100 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
裁剪的区域坐标还是相对canvas.
矩形裁剪：
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; oGc.beginPath();
oGc.rect( 10, 10, 150, 150 )
oGc.closePath(); oGc.clip(); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function(){
oGc.drawImage( oImg, 0, 0 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
用canvas裁剪的图案，填充canvas
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height; var oNewCanvas = document.createElement( "canvas" );
oNewCanvas.width = 200,
oNewCanvas.height = 200,
oNewGc = oNewCanvas.getContext( '2d' ); oNewGc.beginPath();
oNewGc.arc(100, 100, 100, 0, 360 * Math.PI / 180, false);
oNewGc.closePath(); oNewGc.clip(); var oImg = new Image();
oImg.src = './img/mv.jpg';
oImg.onload = function () { //这个一个异步加载，一定要把填充放在图片完成之后额
oNewGc.drawImage(oImg, 0, 0);
var pattern = oGc.createPattern( oNewCanvas, 'repeat' );
oGc.fillStyle = pattern;
oGc.fillRect( 0, 0, width, height );
}
} </script>
</head> <body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>