canvas学习笔记（三）
现在来看看用canvas来绘制一张已经存在的图片
var canvas = document.getElementById('example2');
var ctx2 = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx2.drawImage(img,0,0);
}
img.src = "img.jpg";
ctx2.drawImage(img,0,0) 是在画布(0,0)的位置上画出img.jpg这张图像，当img没有完全载入的时候，drawImage已经执行会导致后面的脚本全部停止运行，所以给了img一个onload事件来保证drawImage的时候已经完全载入了img。
< !DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
canvas{
border:1px solid #000;
display:block;
margin:0 auto;
}
</style>
<body>
<a href="javascript:rotate('left')">向左转</a><a href="javascript:rotate('right')">像右转</a><a href=""></a>
<canvas id="example2" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('example2');
var ctx2 = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx2.drawImage(img,0,0);
}
img.src = "img.jpg";
function rotate(direct){
var temp;
var type = canvas.getAttribute("type");
temp = canvas.height;
canvas.height = canvas.width;
canvas.width = temp;
if(direct == "right"){
switch(type){
case null:
ctx2.translate(canvas.width,0);
ctx2.rotate(Math.PI/2);
canvas.setAttribute("type",1);
break;
case "0":
ctx2.translate(canvas.width,0);
ctx2.rotate(Math.PI/2);
canvas.setAttribute("type",1);
break;
case "1":
ctx2.translate(canvas.width,canvas.height);
ctx2.rotate(Math.PI);
canvas.setAttribute("type",2);
break;
case "2":
ctx2.translate(0,canvas.height);
ctx2.rotate(Math.PI*3/2);
canvas.setAttribute("type",3);
break;
case "3":
ctx2.translate(0,0);
ctx2.rotate(Math.PI*2);
canvas.setAttribute("type",0);
break;
}
}else if(direct == "left"){
switch(type){
case null:
ctx2.translate(0,canvas.height);
ctx2.rotate(Math.PI*3/2);
canvas.setAttribute("type",3);
break;
case "0":
ctx2.translate(0,canvas.height);
ctx2.rotate(Math.PI*3/2);
canvas.setAttribute("type",3);
break;
case "1":
ctx2.translate(0,0);
ctx2.rotate(Math.PI*2);
canvas.setAttribute("type",0);
break;
case "2":
ctx2.translate(canvas.width,0);
ctx2.rotate(Math.PI/2);
canvas.setAttribute("type",1);
break;
case "3":
ctx2.translate(canvas.width,canvas.height);
ctx2.rotate(Math.PI);
canvas.setAttribute("type",2);
break;
}
}
ctx2.drawImage(img,0,0);
}
</script>
</body>
</html>上面是我写的一个canvas旋转图片的例子(只是粗略的实现了功能)