不能畫上矩形的頂部的圓HTML5

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

你確定你需要兩個畫布嗎？我會做一個。

$(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/

Answer 2

爲什麼你需要兩個畫布標籤來做到這一點？這可以用一個畫布完成。這是一個JSBin，它在矩形的頂部畫一個圓。