JavaScript Canvas绘制圆形与矩形时图形遮挡问题求助

你的圆形无法显示，根本原因不是下方的canvas2遮挡，而是圆形的绘制坐标超出了canvas1的可视范围：

• canvas1的高度设置为250px，Canvas的坐标原点在左上角，y轴向下延伸，所以canvas1的可视区域y轴范围是0~250。
• 你绘制圆形时用了ctx.arc(300, 300, 50, 0, 2 * Math.PI)，圆心的y坐标是300，已经超出了canvas1的高度，导致整个圆形都在canvas1的可视区域外，自然看不到。

修复方案 #

方案1：调整canvas1的高度，容纳圆形 #

修改HTML中canvas1的height属性，让它足够放下圆形：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 将canvas1的height改为600，足够容纳圆心(300,300)的圆形 -->
  <canvas id="canvas1" width="800" height="600"></canvas>
  <canvas id="canvas2" width="800" height="300"></canvas>
  <script src="index.js"></script>
</body>
</html>

方案2：调整圆形的绘制坐标，移到canvas1可视范围内 #

修改JavaScript中圆形的圆心坐标，比如移到canvas1的垂直居中位置：

var circle = document.getElementById('canvas1');
var ctx = circle.getContext('2d');
// 将圆心y坐标改为125（canvas1高度250的一半）
ctx.beginPath();
ctx.arc(300, 125, 50, 0, 2 * Math.PI);
ctx.stroke();

var fillColor = 'black';
ctx.fillStyle = fillColor;
ctx.fill();

// 矩形部分代码不变
var rect = document.getElementById('canvas2');
var ctx2 = rect.getContext('2d');
ctx2.beginPath();
ctx2.rect(200, 10, 200, 40);
ctx2.stroke();

var grd2 = ctx2.createLinearGradient(0, 0, 100, 100);
grd2.addColorStop(0, "black");
grd2.addColorStop(1, "white");

ctx2.fillStyle = grd2;
ctx2.fill();

两种方案任选其一，都能让圆形正常显示，和canvas2的位置没有关系。

内容的提问来源于stack exchange，提问作者Chathura Abeywickrama