html5绘制变换图形-旋转图形
2016-05-08 21:17
323 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形的旋转</title>
<script>
function draw(id){
var c=document.getElementById('canvas');
if(c==null)
return false;
var cxt=c.getContext("2d");
cxt.fillStyle="aquamarine";
cxt.fillRect(0,0,400,300);
cxt.translate(200,50);
cxt.fillStyle="blue";
for(var i=0;i<500;i++){
cxt.rotate(Math.PI/15);//指定一个角度，改变画布坐标
cxt.fillRect(0,0,100,50);
}
}
</script>
</head>
<body onload="draw('canvas')">
<h1>图形的旋转</h1>
<canvas id="canvas" width="400" height="300" style="border:1px solid blue;"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>图形的旋转</title>
<script>
function draw(id){
var c=document.getElementById('canvas');
if(c==null)
return false;
var cxt=c.getContext("2d");
cxt.fillStyle="aquamarine";
cxt.fillRect(0,0,400,300);
cxt.translate(200,50);
cxt.fillStyle="blue";
for(var i=0;i<500;i++){
cxt.rotate(Math.PI/15);//指定一个角度，改变画布坐标
cxt.fillRect(0,0,100,50);
}
}
</script>
</head>
<body onload="draw('canvas')">
<h1>图形的旋转</h1>
<canvas id="canvas" width="400" height="300" style="border:1px solid blue;"></canvas>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）
- html5绘制渐变图形-图形缩放
- html5绘制变形图形-变换坐标原点
- HTML5之地理信息
- html5绘制图形渐变-径向渐变
- html5绘制渐变图形-线性渐变
- HTML5概述
- html5绘制基本图形-直线
- HTML5回调函数与地理定位
- html5绘制基本图形-圆形
- 使用Flexible实现手淘H5页面的终端适配
- Canvas学习
- html5画布-绘制矩形
- HTML5的思考
- 学些HTML5的一些小记
- 学些HTML5的一些小记
- 学些HTML5的一些小记
- 学些HTML5的一些小记
- 学些HTML5的一些小记
- 学些HTML5的一些小记