javascript - 这个怎么生成不了canvas
黄舟
黄舟 2017-04-11 09:44:44
[JavaScript讨论组]

我在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>
 <p class="showimg">
     <img id="img1" src='service.jpg' width="200" height="200"/>
     <canvas id="canvas" width="200" height='200'/>
 </p>
<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>
黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(1)
怪我咯

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号