html5绘制变换图形-旋转图形
来源：互联网 发布：淘宝助理五笔怎么打? 编辑：程序博客网 时间：2024/04/29 21:28
<!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>
<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>
0 0
- html5绘制变换图形-旋转图形
- html5绘制变形图形-变换坐标原点
- HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
- 绘制旋转Cube图形
- 【Html5每日练习】canvas绘制坐标变换图形
- HTML5教程-用Canvas标签绘制坐标变换图形
- html5 绘制图形
- HTML5 绘制图形【4】
- 利用HTML5绘制图形
- html5绘制图形
- html5创建变换图形-阴影图形
- html5绘制渐变图形-图形缩放
- html5运用js绘制图形
- html5 canvas基本图形绘制
- HTML5使用canvas绘制图形
- HTML5使用canvas绘制图形
- html5绘制基本图形-圆形
- html5绘制基本图形-直线
- TCP数据传输（六）：上传图片并给出反馈
- 61.JAVA编程思想——共享有限资源
- 用oracle语句计算百分比
- ubuntu kylin14.04 上 android 5.1.1源码下载，编译
- 62.JAVA编程思想——线程堵塞
- html5绘制变换图形-旋转图形
- Java变参、C/C++/Objective_C变参
- 63.JAVA编程思想——死锁
- Trapping Rain Water
- for_each()算法的使用
- 【一天一道LeetCode】#44. Wildcard Matching
- PHP底层的运行机制与原理
- 字符串排序（nyoj 1149）
- CodeForces 666B. World Tour【BFS】
