<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #131115;}
#c1{background: #fbf7fe;}
</style>
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');
/*按原有坐标偏移*/
oGC.translate(200,100);
/*旋转45度 以坐标顶点*/
oGC.rotate(45*Math.PI/180);
/*按照比例放大缩小*/
oGC.scale(1,1);
oGC.fillRect(0,0,100,100);
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
<span>不支持camvas浏览器</span>
</canvas>
</body>
</html>
http://www.5227788.cn/static/Change.html
简单动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #131115;}
#c1{background: #fbf7fe;}
</style>
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');
var num=0;
var num2 = 0;
var value = 1;
setInterval(function(){
num++;
/*函数的封装*/
oGC.save();
/*清楚画布*/
oGC.clearRect(0,0,oC.width,oC.height);
/*按原有坐标偏移*/
oGC.translate(100,100);
if(num2 == 100){
value = -1;
}
else if(num2 == 0){
value = 1;
}
num2 += value;
oGC.fillStyle='red';
/*每次换50/1*/
oGC.scale( num2*1/50,num2*1/50 );
/*每次旋转的角度*/
oGC.rotate(num*Math.PI/180);
/*偏移为中心*/
oGC.translate(-50,-50);
/*实心正方形*/
oGC.fillRect(0,0,100,100);
/*储存路径*/
oGC.restore();
},30)
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
<span>不支持camvas浏览器</span>
</canvas>
</body>
</html>