html5绘制变形图形-变换坐标原点
2016-05-08 20:37
459 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function draw(id){
var c=document.getElementById(id);
var cxt=c.getContext("2d");
cxt.fillStyle="aqua";//绘制大的矩形的颜色
cxt.fillRect(0,0,400,300);
cxt.translate(200,50);
cxt.fillStyle="blue";//绘制小矩形的颜色
for(var i=0;i<500;i++){
cxt.translate(25,25);
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(id);
var cxt=c.getContext("2d");
cxt.fillStyle="aqua";//绘制大的矩形的颜色
cxt.fillRect(0,0,400,300);
cxt.translate(200,50);
cxt.fillStyle="blue";//绘制小矩形的颜色
for(var i=0;i<500;i++){
cxt.translate(25,25);
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 