<p class="sougouContent">代码如下： <br> <br> <!DOCTYPE html> <br> <html dir="ltr" lang="en-US"> <br> <br> <meta charset="utf-8"> <br> <title></title> <br> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <br> <script type="text/javascript"> <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, <br> }); <br> </script> <br> </head> <br> <br> <img src="http://a.hiphotos.baidu.com/album/s%3D1600%3Bq%3D90/sign=28b8cc8cbc315c6047956fe9bd81f062/1e30e924b899a901844e3baf1d950a7b0208f534.jpg" /> <br /> </body> <br> </html> <br> <br> 描画画像のサイズが変化しており、元の画像の形状ではなく、キャンバスの背景の色が見られます。クロムopera ie9 外見似都無し你说的问题 <br> </p> .after($("<canvas width="+w+" height="+height+" >") <br> <h2> </h2> Canvas の实际宽高（canvas代码种实际参照）的大小） 要这样设置 否默认是 300－150 <p class="sougouAnswer">样式里面的 宽高 代表 渲染大小 </p> <p class="sougouAnswer"> 实际宽高 和 样式 宽高 不一致 就会拉伸了 <br> <br> <br> <br> Canvas画布の尺寸没问题，用drawImage画完成した写真はソース img ポイントのサイズと異なります <br> <br> Canvas の領域の幅と高さ css の領域の幅と高さが異なります。马の跟この幅は一样的、跟css 里面の不一样 <br> <br> キャンバス画布の尺寸没问题、drawImage 画で出来た图片与源 img 节点尺寸不一样 </p> 2 楼既得和你说的很明らか了 <p class="sougouAnswer"> </p>谢了各位，解决了 <p class="sougouAnswer"> </p> 怎么解决的呀，也碰到了同样的问题，望楼主告知下解的方法哦！！决的方法哦！！ <p class="sougouAnswer"> キャンバスの幅と高さは、样式ではなくプロパティに設定する必要があります <br> これは、<canvas width="400px" height="300px"></canvas> </p> 不正解です<canvas style="width : 400px; height: 300px;"></canvas>和 canvas {width: 400px; height: 300px;} <p class="sougouAnswer"> </p>原来如此。。。
