问答详情
源自:3-1 Canvas 时钟外边框圆

为什么我照着3-1课程打,最后画圆仍然最后画圆仍然画不出来。

代码供上,请大神指教
time.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="clock.js"></script>
 <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>
 </body>
</html>
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();

提问者:枫语 2017-03-02 19:17

个回答

  • qq_虚幻的泡影_0
    2017-10-24 11:32:26

     <script type="text/javascript" src="clock.js"></script>   这句要放到body中div的后边



  • qq_Lamaarasadne_0
    2017-03-03 15:39:32

    <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>就可出来啊