Question

我正在使用html5，我想在矩形上绘制一个圆圈，所以我使用了以下HTML代码：

<canvas id="myCanvas" style="z-index: 1;width:70%;height: 70%;float: left;">

<canvas id="c1" style="z-index: 2;width:10%;height: 10%;float: left;"></canvas>

并遵循js代码：

  $(document).ready(function() {
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.rect(10,10,$("#myCanvas").height(),$("#myCanvas").width());
  ctx.fillStyle = 'yellow';
  ctx.fill();
  ctx.stroke();


  var canvas = document.getElementById('c1');
  var context = canvas.getContext('2d');
  var centerX = $("#myCanvas").height()/ 2;
  var centerY = $("#myCanvas").width() / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();

  });

这里是jfiddle链接：

jfiddle

现在的问题是圈子没有显示，我不知道是什么问题！任何人都可以帮助我吗？

Answer 1

为什么需要两个canvas标签才能执行此操作？这可以通过一个画布完成。这是一个JSBin，它在一个矩形的顶部绘制一个圆圈。

Answer 2

你确定需要两幅画布吗？我会一个人做。

$(document).ready(function() {

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.rect(10,10,$("#myCanvas").height(),$("#myCanvas").width());
    ctx.fillStyle = 'yellow';
    ctx.fill();
    ctx.stroke();

    var centerX = $("#myCanvas").height()/ 2;
    var centerY = $("#myCanvas").width() / 2;
    var radius = 70;

    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#003300';
    ctx.stroke();

});

http://jsfiddle.net/7FuL9/2/

无法在html5中的矩形顶部绘制圆圈

2 个答案: