Question

我的问题是将图像居中放在画布中。帆布必须是全尺寸的。整个过程应该创建一个Web预加载器。在这种情况下，css内部的样式图像不起作用。

<style> canvas{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
    z-index: 99;   }

</style>   <body>
    <canvas id="c"><img id="logo" width="800" height="150" src="imgsource" alt="logo"></canvas> <div>   web content </div>

    <script>

    jQuery(window).on('load', function() { 
    jQuery('#c').delay(7000).fadeOut('slow'); 
    jQuery('body').delay(7000).css({'overflow':'visible'});
    })


    window.onload = function() {
        var c = document.getElementById("c");
        var ctx = c.getContext("2d");
        var img = document.getElementById("logo");
        ctx.drawImage(img, 50, 0);


    } </script>

Answer 1

以下仅演示使用drawImg在画布内居中的图像。请注意，左侧的图片来自html <img>元素，而另一张来自drawImg来电。

在stackoverflow之外，你必须等待图像加载才能绘制它，但是你已经使用.on('load', ...)我假设你知道这一点。

要避免使用两张图片，请在javascript中创建image element，不要将其添加到文档中，只能将其用于渲染。

＆＃13;

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let img = document.getElementById("i");

//just to make the area the canvas occupies visible
ctx.fillStyle = 'grey';
ctx.fillRect(0, 0, canvas.width, canvas.height);

//draw the image centered
ctx.drawImage(
  img,
  canvas.width / 2 - img.width / 2,
  canvas.height / 2 - img.height / 2
);

＆＃13;

<html>
  <body>
    <img id="i" src="http://i.imgur.com/kdJicdy.png"/>
    <canvas id="canvas" width="320" height="240">Your browser doesn't support canvas</canvas>
  </body>
</html>

＆＃13;

如何在javascript中将图像置于画布中心？

1 个答案: