为什么HTML 5画布绘图图像未显示CSS?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (99)

当我尝试使用带有css的预加载图像在画布上绘制图像时:

img.style.backgroundColor="red";
ctx.drawImage(img,0,0,100,100);

我发现图像正在绘制,因为它没有css。HTML画布是否支持CSS?

提问于
用户回答回答于

画布不呈现css,不管你用什么css做图像,除非你自己画边框或背景,否则它总是会呈现普通的图像。

用户回答回答于

看看下面的例子。让你开始了解如何加载图像并将其复制到画布中。如果不需要在页面上显示原始图像,则在IMG标记中添加“style="display:none;“。要使图像着色,请结合填充的Rect查看globalAlpha如下所示:

window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");

    ctx.globalAlpha = 0.5;
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#ff0000";
    ctx.fill();

    ctx.drawImage(img, 10, 10);
};

扫码关注云+社区

领取腾讯云代金券