无法修改Canvas样式？教你调整Canvas背景色及其他CSS属性

首先得指出你代码里的关键问题：你用了<div>元素并给它设了id="canvas"，但Canvas绘图必须用<canvas>标签，不是div。先修正这个基础问题，再看样式修改的具体方法：

1. 用CSS设置背景色及其他样式 #

CSS可以直接给Canvas元素设置背景色、边框、圆角这类样式，这种背景是在Canvas画布底层的，不会干扰画布内的绘图内容：

<!-- 把div替换成canvas标签 -->
<canvas class="chartContainer" id="canvas" style="height: 300px; width: 100%;"></canvas>
<style>
.chartContainer {
  /* 背景色 */
  background-color: #f0f8ff;
  /* 其他样式示例 */
  border: 2px solid #333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>
<script>
const canvas = document.getElementById('canvas');
// 注意：Canvas的width/height属性是绘图分辨率，和CSS显示尺寸要区分开
// 结合设备像素比设置，避免绘图模糊
const displayWidth = canvas.offsetWidth;
const displayHeight = canvas.offsetHeight;
canvas.setAttribute('width', displayWidth * window.devicePixelRatio);
canvas.setAttribute('height', displayHeight * window.devicePixelRatio);
const ctx = canvas.getContext('2d');
// 缩放上下文适配像素比
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

// 示例折线绘制
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(150, 100);
ctx.lineTo(250, 200);
ctx.lineTo(350, 80);
ctx.strokeStyle = '#2ecc71';
ctx.lineWidth = 3;
ctx.stroke();
</script>

2. 用Canvas API绘制背景色 #

如果需要背景色成为画布内容的一部分（比如导出Canvas为图片时背景会被包含），可以用fillRect绘制全屏矩形当背景：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制背景
ctx.fillStyle = '#f0f8ff';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 之后再绘制折线图
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(150, 100);
ctx.lineTo(250, 200);
ctx.lineTo(350, 80);
ctx.strokeStyle = '#2ecc71';
ctx.lineWidth = 3;
ctx.stroke();

重要提醒 #

• 别混淆Canvas的属性width/height和CSS width/height：前者是绘图的分辨率，后者是元素在页面的显示尺寸，直接用window.innerWidth/innerHeight容易导致绘图模糊，建议结合设备像素比调整。
• 如果同时用CSS背景和Canvas绘制背景，Canvas的背景会覆盖CSS背景，因为Canvas绘图在元素上层。

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