<body>
<form>
<select>
<option value="2">简单</option>
<option value="3">困难</option>
</select>
<button id="starBtn">开始</button>
</form>
<section>
<canvas class="canvasSection" width="600" height="600" id="canvas1"></canvas>
<!--相册-->
<section id="album" class="canvasSection">
</section>
<section class="clear"></section>
<img src="imgs/example.jpg" hidden="hidden" />
</section>
</body>
<script>
var album ;//小canvas容器
var imageObj ;// 要绘画的图片
var canvas;//小canvas对象
window.onload= function(){
var btn = document.getElementById("starBtn");//btn为我的一个按钮
btn.onclick = function(){
for(var i =0;i<n;i++)
for(var j=0;j<n;j++)
{
canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height= 300;
album.appendChild(canvas);
}
};
};
</script>
这个思路有些问题，应该是在canvas上面绘制图形，而不是操作dom ,生成N多的html的dom结构，那应该是svg应该干的活，既然使用了canvas，就需要懂得扬长避短。canvas是在像素级的绘制，多层次渲染的优势，所以你应该就是在canvas上绘制图形