canvas画布--绘制螺旋图形

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

html标签

<canvas id="canvas" width="800" height="500"></canvas>

脚本

<script type="text/javascript">
	//抓取元素
	var oc = document.getElementById("canvas");
	var ocx = oc.getContext("2d");
	//准备画笔
	ocx.fillStyle = "#eef";
	
	//绘制矩形
	ocx.fillRect(0,0,250,200);
	ocx.fillStyle = "rgba(255,0,0,0.5)";
	//重新映射 矩形的坐标点
	ocx.translate(150,0);
	
	for(var i=0; i<=50;i++){
		ocx.translate(25,25);
		ocx.scale(0.95,0.95);
		ocx.rotate(Math.PI/10);
		ocx.fillRect(0,0,50,50);
		
	}
			
</script>

效果