为了账号安全,请及时绑定邮箱和手机立即绑定

为什么按照老师的代码写圆不显示呀?

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width,initial-scale=1">

<!--width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度;

initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。

通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。

        -->

<title>canvas clock</title>

<style type="text/css">

div{

text-align: center;

margin-top: 250px;

}

#clock{border: 1px solid #ccc;}

</style>

</head>

<body>

<div>

<canvas id="clock" height="200px" width="200px"></canvas>

</div>

<script type="text/javascript" src="clock.js"></script>

<!--

        作者:offline

        时间:2017-03-10

        描述:src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;

        在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

        src和href之间有区别,可以混着用。src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。

       -->

</body>

</html>

var dom=document.getElementById('clock'); //获取时钟元素,单引号

var ctx=dom.getContext('2d');//获取上下文

var width=ctx.canvas.width;

var heigth=ctx.canvas.height;

var r=width/2;


function drawBackground()

{

//画圆

ctx.save();

ctx.translate(r,r);

ctx.beginPath();//路径起始

ctx.lineWidth=10;

ctx.arc(0,0,r,0,2*Math.PI,false); //以0,0为原点,r为半径,0为起始角,2*Math.PI为结束角,顺时针画圆

ctx.stroke();

}


正在回答

3 回答

http://img1.sycdn.imooc.com//58c25e6f0001514903720175.jpg添加这条语句就可以了。

1 回复 有任何疑惑可以回复我~
#1

冰洁雪儿 提问者

非常感谢!
2017-03-12 回复 有任何疑惑可以回复我~

错了,因为你没有写调用这个方法,就是在后面写上drawBackground();就是执行你写的这个方法。

0 回复 有任何疑惑可以回复我~

因为先要执行ctx.beginPath();然后在执行ctx.translate(r,r);

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么按照老师的代码写圆不显示呀?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信