如何在javascript中使图像居中于画布内部？
我在画布内的图像居中时遇到问题。帆布必须是全尺寸的。整个过程应该创建一个web预加载程序。在这种情况下，css内部的图像样式设置不起作用如何在javascript中使图像居中于画布内部？,javascript,jquery,html,css,canvas,Javascript,Jquery,Html,Css,Canvas,我在画布内的图像居中时遇到问题。帆布必须是全尺寸的。整个过程应该创建一个web预加载程序。在这种情况下，css内部的图像样式设置不起作用 <style> canvas{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; z-index: 99; } </style> <body>
<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>
以下仅演示了使用drawImg在画布内对图像进行居中处理。请注意，左边的图像来自html 您的浏览器不支持画布
设置画布上的宽度和高度属性当我在画布上设置属性的宽度和高度时，图像将消失。