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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>text5.9绘制</title><styl... <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text5.9绘制</title>
<style type="text/css">
canvas{background:#E59866}
</style>
</head>
<body>
<canvas id="one" width="800" height="600">
您浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var c=canvas.getContext('2d');
c.lineWidth=6;
c.strokeStyle="green";
c.fillStyle="red";
c.arc(100,50,30,0,Math.PI*2);
c.stroke();
c.beginPath();
c.arc(100,150,30,0,Math.PI*2)
c.fill()
</script>
</body>
</html>
第二组:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text5.9绘制</title>
<style type="text/css">
canvas{background:#E59866}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600">
您浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var c=canvas.getContext('2d');
c.lineWidth=6;
c.strokeStyle="green";
c.fillStyle="red";
c.arc(100,50,30,0,Math.PI*2);
c.stroke();
c.beginPath();
c.arc(100,150,30,0,Math.PI*2)
c.fill()
</script>
</body>
</html>
展开
 我来答
网海1书生
科技发烧友

2018-05-15 · 擅长软件设计、WEB应用开发、小程序
网海1书生
采纳数:12311 获赞数:26228

向TA提问 私信TA
展开全部

第一个 <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了

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式