浏览器不支持吧，我这里可以正常显示画框

没有调用drawBackground方法

已解决，是我的js文件第三行代码没有正确获取到dom的上下文，写成了document

因为dom节点里没有canvas的绘制方法,ctx上下文对象里封装了canvas的绘制方法,  这里是 2D 绘图上下文,可以绘制简单的 2D 图形,除了2D绘图上下文,还有WebGL 上下文用于绘制3D图形

宽度好像可以直接写 var width = canvas.width;  不用那么麻烦

浏览器的执行顺序是从上到下加载解析的，放在head的js文件会比body中的html元素优先执行，此时canvas元素还未被浏览器解析渲染出来，所以没有效果

可以在将代码放在

 window.onload = function () {

    // 具体代码

}

中，这样就能保证js文件先执行也能渲染出时钟

sublime text3,挺好用得

代码贴出来

sorry，我是用notepad写的，我觉得你还是把代码一起发出来看看是不是有其它问题。

canvas默认的宽高是300 150，需要显式传宽高修改

clock 单词拼写有问题 ，有的你写成了 c1ock；

<canvas id="clock" width="200" height="200"></canvas> 画布的大小要放在标签里，不能写在样式表里；

var r= width/2;   改成 var r= kuan/2;

把2b改成2d ,真逗

请上代码

ctx.translate(r,r);

里面是逗号

没js代码无法回答呀

这个问题解决了我的问题- canvas 的宽高要在<canvas>标签内定义 不能在style里面定义

sublime

src 大哥

添加这条语句就可以了。

PI.不是pi

<script>

clock.js

var dom = document.getElementById('clock');

var ctx = dom.getContext('2d');

var width = ctx.canvas.width;

var height = ctx.canvas.height;

var r = width / 2;

function drawBackground() {

 "use strict";

 ctx.translate(r, r);

 ctx.beginPath();

 ctx.arc(0, 0, r, 0, 2 * Math.PI, false);

 ctx.stroke();

}

drawBackground();

</script>

加一个<script></script>就可出来啊

因为lineWidth的宽度值是以图形的边缘为基准向两边扩展的，也就是说原来的半径为r，给了一个10像素的宽度，那么新的半径（到外边）就是r+5，到内边的半径就是r-5。

content属性值 :

     width:可视区域的宽度，值可为数字或关键词device-width

     height:同width

     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

              maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

     user-scalable:是否可对页面进行缩放，no 禁止缩放

我猜测的你的js代码的引用可能没有写在body内

我写在body里面为什么还是不行呀？

你的那个 ctx.src(0,0,r,0,2*Math.PI,false)少了一个起始角度0，你在好好对比一下

DW也是可以画的

理论上讲我也觉得是r-10，线宽10那两边不都得减10么，哈哈，

但是。。实际上是r-5才能实现效果，具体我也不懂T T~~前面一堆长篇大论的不知道在云云什么东东。。