我在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>
你图片路径有没有写对啊,我复制你的代码在我电脑上运行是可以显示的