两种办法
一、设置canvas的背景透明
canvas.fillStyle = 'hsla(242, 95%, 3%, 1)';//背景色，不设置就透明
二、直接设置canvas背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvaxbox" width="500" height="500"></canvas>
<script>
var c = document.getElementById("canvaxbox");
var canvas = c.getContext("2d");
var img = new Image();
img.src = "//repo.bfw.wiki/bfwrepo/image/5df0355083a46.png";
img.onload = imgfn; //图片加载完在执行
function imgfn() {
var bg = canvas.createPattern(img, "no-repeat"); //createPattern() 方法在指定的方向内重复指定的元素。
canvas.fillStyle = bg; //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
canvas.fillRect(0, 0, c.width, c.height); //绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)
}
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
最新提问
如何破解绕开seedance2.0真人照片生成视频 限制？
python有哪些算法可以将视频中的每个帧图片去除指定区域水印合成新的视频？
iphone的激光雷达数据能否实时传输到three三维空间中？
豆包sora等ai视频生成大模型生成的视频水印如何去除？
python如何实现在电脑上拨号打电话给手机？
具身机器人与人形机器人区别？
nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行？
为啥windows.onerror捕获js错误是这样的{"message":"Script error.","source":"","lineno":0,"colno":0,"stack":null,
2026年ai将全面接管编程？
WebMCP是干啥的？
