HTML5中绘制圆形，请问以下两组代码一样，为何一个能显示圆形，一个不能？本人一个小时都没琢磨出来。

html-css07

HTML5中绘制圆形，请问以下两组代码一样，为何一个能显示圆形，一个不能？本人一个小时都没琢磨出来。,第1张

第一个 <canvas id="one" width="800" height="600">

第二个 <canvas id="canvas" width="800" height="600">

这就是区别！

所以第一组的 var canvas=document.getElementById('canvas')

也要相应改为 var canvas=document.getElementById('one')

这样就OK了

<style>

html,body {margin:0 padding:0 overflow:hidden}

section {width:100vw height:100vw}

div {width:calc(100% - 5vw) height:calc(100% - 5vw) padding:2vw border:0.5vw solid black border-radius:50%}

</style>

<section></section>

<script>

window.onload=function(){

    var divs=document.getElementsByTagName("section")[0]

    for(var i=0i<20i++){

        divs.appendChild(document.createElement("div"))

        divs=divs.firstChild

    }

}

</script>