Problems with canvas and drawImage, experts can quickly learn_html/css_WEB-ITnose

代码如下：

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的实际宽高（canvas代码种实际参考的大小） 要这样设置  否则默认是 300－150
样式里面的 宽高 代表 渲染大小

实际宽高 和  样式 宽高 不一致  就会拉伸了

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;}

原来如此。。。。 坑了我好久。。。。