简体中文(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
364

为什么我把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教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

모든 응답(2)
刘奇
刘奇2017-04-17 13:18:29 2층

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

좋다 +0
답글 추가
刘奇
刘奇2017-04-17 13:18:29 1층

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

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！