Question

我正在尝试将图像设置为画布，但我无法做到。我找不到任何错误。画布出现在inspect element上，但图像未设置。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
       <!-- <link rel="stylesheet" href="CSS/styling.css">
        <script src="JavaScript/setImage.js"></script>-->
    </head>
    <body>

    <canvas id="canvas" style="color: #0cff15; -webkit-background-image: url(/cheque.jpg)" ></canvas>

    </body>
</html>

Answer 1

你没有像div那样设置一个canvas元素。你必须通过javascript获取其上下文并绘制到它。搜索＆＃34; mdn canvas＆＃34;用于文档和阅读。

Answer 2

您可以使用css设置背景图像，您也应该给出width和height属性。请参阅下面的演示。

#canvas{
  color: #0cff15; 
  background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
  -webkit-background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
  border:1px solid black;
  width:500px;
  height:500px;
}

    <canvas id="canvas"></canvas>

设置画布的背景图像

2 个答案: