简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
canvas - html5绘制图片的问题
高洛峰
高洛峰 2017-04-17 13:16:29
0
2
330

为什么我把new Image()放在function里面时，图片出不来。
<!DOCTYPE html>
<html>

<head>
    <meta charset="{CHARSET}">
    <title></title>
</head>
<body onload="init()">
    <canvas id="girl"></canvas>
</body>
<script>
    var girl = document.getElementById("girl");
    var girlWidth = 800;
    var girlHeight = 400;
    girl.width = girlWidth;
    girl.height = girlHeight;
    var girlCans = girl.getContext('2d');
    
    
    function init(){
        drawGirl();
    }
    
    function drawGirl(){
        var girlPic = new Image();
        girlPic.src = "img/girl.jpg";
        girlCans.drawImage(girlPic,0,0, girlWidth, girlHeight);
    }
    
    
</script>

</html>

然而我把girlPic设为全局的就能正常显示
<!DOCTYPE html>
<html>

<head>
    <meta charset="{CHARSET}">
    <title></title>
</head>
<body onload="init()">
    <canvas id="girl"></canvas>
</body>
<script>
    var girl = document.getElementById("girl");
    var girlWidth = 800;
    var girlHeight = 400;
    girl.width = girlWidth;
    girl.height = girlHeight;
    var girlCans = girl.getContext('2d');
    var girlPic = new Image();
    girlPic.src = "img/girl.jpg";
    
    function init(){
        drawGirl();
    }
    
    function drawGirl(){
        
        girlCans.drawImage(girlPic,0,0, girlWidth, girlHeight);
    }
    
    
</script>

</html>

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

répondre à tous(2)
刘奇
刘奇2017-04-17 13:18:29 2 plancher

因为在image设置完src后，需要一定的时间进行加载，在src设置完后马上运行drawImage函数的时候，image实际上还什么也没有。
比较合适的写法是image.onload = girlCans.drawImage(girlPic,0,0, girlWidth, girlHeight);

Comme +0
Ajouter une réponse
刘奇
刘奇2017-04-17 13:18:29 1 plancher

img加载是异步滴。需要用onload()

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！