HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
像素操作
| 属性 |
描述 |
| width |
返回 ImageData 对象的宽度 |
| height |
返回 ImageData 对象的高度 |
| data |
返回一个对象，其包含指定的 ImageData 对象的图像数据 |
其他
| 方法 |
描述 |
| save() |
保存当前环境的状态 |
| restore() |
返回之前保存过的路径状态和属性 |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
w3ch文档是上面的。
难点在于旋转中心的确定。
第一版代码：
![]()
<html>
<head>
<style type="text/css">
#img{
border: solid 1px red;
width:500px;
height:500px;
position:relative;
}
#canvas_myimg{
position:absolute;
top:50%;
left:50%;
}
#myimg{
position:absolute;
top:50%;
left:50%;
width:400;
height:400;
}
</style>
<script src="jquery-1.6.1.min.js"></script>
<script language="javascript">
var width = 400;
var height = 400;
var changePx = 50;
function center(){
$("#canvas_myimg").css({'margin-left':-width/2,'margin-top':-height/2});
}
function rotate(arr){
var img = document.getElementById("myimg");
if(!img){return false;}
n = (n == null) ? 0 : n;
if(arr == 'left'){
n = (parseInt(n) + parseInt(3))%4;
}else if(arr == 'right'){
n = (parseInt(n) + parseInt(1))%4;
}else if(arr == 'reversal'){
n = (parseInt(n) + parseInt(2))%4;
}
img.setAttribute("step",n);
//对IE浏览器使用滤镜旋转
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
// 对现代浏览器写入HTML5的元素进行旋转： canvas
}else{
var c = document.getElementById("canvas_myimg");
if(c == null){
img.style.visibility = 'hidden';
img.style.position = 'absolute';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_myimg');
img.parentNode.appendChild(c);
}
var canvasContext = c.getContext('2d');
switch(n) {
case 0 :
canvasContext.rotate(0 * Math.PI / 180);
canvasContext.drawImage(img, 0, 0 , width , height);
break;
case 1 :
canvasContext.rotate(90 * Math.PI / 180);
canvasContext.drawImage(img, 0, -height , width , height);
break;
case 2 :
canvasContext.rotate(180 * Math.PI / 180);
canvasContext.drawImage(img, -width, -height , width , height);
break;
case 3 :
canvasContext.rotate(270 * Math.PI / 180);
canvasContext.drawImage(img, -width, 0 , width , height);
break;
}
center();
}
}
function change(arr){
var newWidth = 0;
var newHeight = 0;
if(arr == 'add'){
newWidth = parseInt(width) + parseInt(changePx);
newHeight = parseInt(height) + parseInt(changePx);
}else if(arr == 'multiple'){
newWidth = parseInt(width) - parseInt(changePx);
newHeight = parseInt(height) - parseInt(changePx);
}
if(newWidth <= 700 && newHeight <= 700 && newWidth >= 100 && newHeight >= 100){
width = newWidth;
height = newHeight;
}
rotate(0);
}
$(function(){
$("#myimg").css({'margin-left':-width/2,'margin-top':-height/2});
rotate(0);
})
//$("#myimg").onload = function(){
//}
</script>
</head>
<body>
<div id="tool">
<a href="#" id="arr_left" onclick="rotate('left')">向左</a>
<a href="#" id="arr_right" onclick="rotate('right')">向右</a>
<a href="#" id="arr_reversal" onclick="rotate('reversal')">反转</a>
<a href="#" id="add" onclick="change('add')">加大</a>
<a href="#" id="multiple" onclick="change('multiple')">缩小</a>
</div>
<div id="img" class="img">
<img src="temp.jpg" alt="" id="myimg"/>
</div>
</body>
</html>
View Code