html5绘制渐变图形-图形缩放

来源:互联网 发布:淘宝怎么开店教程 编辑:程序博客网 时间:2024/05/02 19:42
<!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.scale(3,0.5);
  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
原创粉丝点击