<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript">
onload=function(){
var c=document.getElementById("mycanvas");
c.width=500;
c.height=500;
var ctx=c.getContext("2d");
ctx.fillStyle="#ff0000";
//移动：横、竖位移
ctx.translate(100,90);
//旋转
ctx.rotate(90*Math.PI/180);//围绕(0,0)起始点开始的
//缩放
ctx.scale(0.5,3);
ctx.rect(0,0,350,150);
ctx.fill();
}
</script>
</head>
<body>
<canvas id="mycanvas"></canvas>
</body>
</html>