Heim >Web-Frontend >HTML-Tutorial >canvas、drawImage的问题,高手速进_html/css_WEB-ITnose

canvas、drawImage的问题,高手速进_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:18:551203Durchsuche

代码如下:

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>


canvas、drawImage的问题,高手速进_html/css_WEB-ITnose



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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn