这个怎么生成不了canvas

Question

这个怎么生成不了canvas

发布于
2016-04-21

我在canvas上绘制了图片，怎么没显示???

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
body{text-align:center;}
.showimg{width:200px;height:200px;overflow:hidden;position:relative;margin:100px auto;}
.showimg .imgtest{position:absolute;}
.showimg .a1{top:30px;left:30px;}
.showimg .a2{top:90px;left:120px;}
.showimg{width:200px;height:200px;overflow:hidden;}
</style>
<body>
 <div class="showimg">
     <img id="img1" src='service.jpg' width="200" height="200"/>
     <canvas id="canvas" width="200" height='200'/>
 </div>
<script type="text/javascript">
    
    var canvas = document.getElementById('canvas');
    var img = document.getElementById('img1');
    var ctx = canvas.getContext('2d');
    var images = new Image();
    images.src = img.src;
    images.onload = function(){
        ctx.drawImage(images,0,0,200,200);
        console.log(canvas.toDataURL("image/png"));
    }
        
</script>
</body>
</html>

javascript canvas

阅读 2.4k

1 个回答

得票最新

づ_lyf

660980100

发布于
2016-04-21

你图片路径有没有写对啊，我复制你的代码在我电脑上运行是可以显示的

撰写回答