<!DOCTYPE htmls>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>
<div class="mid">
<canvas width="600" height="400" style="background:pink" id="canvas">
您的浏览器当前版本不支持canvas标签
</canvas>
</div>
</body>
</html>
<script>
//获取画布DOM 还不可以操作
var canvas=document.getElementById('canvas');
//alert(canvas);
//设置绘图环境
var cxt=canvas.getContext('2d');
cxt.beginPath();
var img = new Image();
img.src = "./pics/psb.jpg";
cxt.drawImage(img, 100, 100, 240, 169);
cxt.save();
//在异次元空间重置0,0点的位置
cxt.translate(100,100);
//图片/形状旋转
//设置旋转角度 参数是弧度 角度 0-360 弧度=角度*Math.PI/180
cxt.rotate(-30*Math.PI/180);
var img = new Image();
img.src = "./pics/psb.jpg";
cxt.drawImage(img, 0, 0 , 240, 169);
cxt.restore();
</script>
