canvas、drawImage的问题，高手速进_html/css_WEB-ITnose
php中文网
发布： 2016-06-24 12:18:55
原创
1377人浏览过
代码如下：
nbsp;html>
<script></script>
<script> <br /> jQuery(function ($) { <br /> $("img").load(function () { <br /> var w = $(this).width(), <br /> h = $(this).height(); <br /> $(this).after($("<canvas>").css({"width": w, "height": h, "backgroundColor": "blue"})); <br /> var ctx = $(this).next("canvas")[0].getContext("2d"); <br /> ctx.drawImage($(this)[0], 0, 0, w, h); <br /> }); <br /> }); <br /> </script>
drawImage出来的图片尺寸变形，不是原来图片的形状，会看到canvas背景蓝色。
回复讨论(解决方案)
请问你用的是什么浏览器呀？？？我用的chrome opera ie9貌似都没有你说的问题
.after($("
canvas画布的尺寸没问题，用drawImage画出来的图片与源img节点尺寸不一样
canvas里面的width和height跟css里面的width和height是不一样的，我以前就被坑过。。 统一用canvas.width比较好，画板的坐标神马的跟这个width是一样的，跟css里面的不一样
canvas画布的尺寸没问题，用drawImage画出来的图片与源img节点尺寸不一样
2楼已经和你说的很清楚了
谢了各位，解决了
怎么解决的呀，也碰到了同样的问题，望楼主告知下解决的方法哦！！
怎么解决的呀，也碰到了同样的问题，望楼主告知下解决的方法哦！！
canvas的width和height要设置成属性而不是样式
就是这种
不是 和 canvas {width: 400px; height: 300px;}
原来如此。。。。 坑了我好久。。。。
HTML速学教程(入门课程)
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
310
收藏
