canvas自定义样式

canvas元素本身是没有样式的，但可以通过CSS样式表来控制canvas元素的大小和位置。同时，canvas元素的绘制内容可以通过JavaScript来控制，因此可以通过编写JavaScript代码来实现自定义的样式效果。

以下是一些常用的自定义样式技巧：

1. 设置canvas元素的宽高属性。可以通过CSS样式表或JavaScript代码来设置canvas元素的宽高属性，以控制canvas元素的大小。例如：

canvas {
  width: 500px;
  height: 300px;
}

const canvas = document.querySelector('canvas');
canvas.width = 500;
canvas.height = 300;

2. 控制canvas元素的位置。可以通过CSS样式表来控制canvas元素的位置，例如：

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这样可以将canvas元素居中显示在父元素中。

3. 绘制自定义形状。可以通过JavaScript代码来绘制自定义形状，例如：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.fillStyle = '#ff0000';
ctx.fill();

这段代码将在canvas元素中绘制一个三角形，并设置其填充颜色为红色。

4. 使用图片作为canvas的背景。可以在canvas元素中绘制图片，作为canvas的背景。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};
img.src = 'image.jpg';

这段代码将在canvas元素中绘制一张图片，并将其作为canvas的背景。