html5画布显示图片问题 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>   
    <canvas id="ca1" width="400" height="400" style="border:1px solid#c3c3c3;"></canvas>
    <!-- <button onclick="showpic()">显示图片</button> -->
    <script type="text/javascript">

        function showpic(){
            var c=document.getElementById("ca1");//获取画布对象
                var cxt=c.getContext("2d");//创建context对象，内建的HTML 5对象，拥有多种绘制图像的方法
                var img=new Image(20,200)
                img.src="1.jpg"
                cxt.drawImage(img,0,0);
            // alert(5441415);
        }

        setTimeout("showpic()", 2200);//渲染问题，一定得做延时操作，或者使用按钮进行,使用按钮这里测试是需要点两次
    </script>
</body>
</html>

 

posted @ 2020-08-18 16:11  DurianTRY  阅读(373)  评论(0)  编辑  收藏  举报