1.插入图片
demo.html
drawImage(oImg,x,y,w,h) (当前图片,坐标x(正右),坐标y(正下),宽,高)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style>
<script type="text/javascript">
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var yImg = new Image()
yImg.onload = function(){
draw(this)
}
yImg.src = '../img/2.png'
function draw(obj){
oGC.drawImage(obj,0,0,400,200) //drawImage(oImg,x,y,w,h) (当前图片,坐标x,坐标y,宽,高)
}
}
</script>
</head>
<body>
<canvas id="c1" width="400" height="400">
<span>不支持canvas浏览器</span>
</canvas>
</body>
</html>
2.图片旋转
图示(顺时针旋转90度)
图示(顺时针旋转)
这样就完成了一个类似微博的旋转功能
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style>
<script type="text/javascript">
window.onload = function(){
var aInput = document.getElementsByTagName('input')
var oImg = document.getElementById('img1')
var yImg = new Image()
var iNow = 0
yImg.onload = function() {
draw(oImg)
}
yImg.src = oImg.src
function draw(obj){
var oC = document.createElement('canvas')
var oGC = oC.getContext('2d')
oC.width = obj.width
oC.height = obj.height
obj.parentNode.replaceChild(oC,obj) //replaceChild(newnode,oldnode);
oGC.drawImage(obj,0,0)
aInput[1].onclick = function(){
if(iNow == 3){
iNow = 0
}else{
iNow++
}
toChange()
}
aInput[0].onclick = function(){
if(iNow == 0){
iNow = 3
}else{
iNow--
}
toChange()
}
function toChange(){
switch (iNow) {
case 1:
// 以左上角旋转 此处不好理解,图片旋转的时候,坐标轴也一起旋转了,可以参照图示进行理解
oC.width = obj.height
oC.height = obj.width
oGC.rotate(90*Math.PI/180)
oGC.drawImage(obj,0,-obj.height)
break;
case 2:
// 每次旋转都是重新以最初位置进行旋转,这样就可以理解为什么是旋转180度
oC.width = obj.width
oC.height = obj.height
oGC.rotate(180*Math.PI/180)
oGC.drawImage(obj,-obj.width,-obj.height)
break;
case 3:
oC.width = obj.height
oC.height = obj.width
oGC.rotate(270*Math.PI/180)
oGC.drawImage(obj,-obj.width,0)
break;
case 0:
oC.width = obj.width
oC.height = obj.height
oGC.rotate(0*Math.PI/180)
oGC.drawImage(obj,0,0)
break;
default:
break;
}
}
}
}
</script>
</head>
<body>
<input type="button" value="←" />
<input type="button" value="→" />
<div>
<img src="../img/2.png" id="img1" />
</div>
</body>
</html>