最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

canvas、drawImage的问题,高手速进_html/css

来源:动视网 责编:小采 时间:2020-11-27 15:46:29
文档

canvas、drawImage的问题,高手速进_html/css

canvas、drawImage的问题,高手速进_html/css_WEB-ITnose:代码如下: jQuery(function ($) { $(img).load(function () { var w = $(this).width(), h = $(this).height(); $(this).after($().css({width: w, height: h, bac
推荐度:
导读canvas、drawImage的问题,高手速进_html/css_WEB-ITnose:代码如下: jQuery(function ($) { $(img).load(function () { var w = $(this).width(), h = $(this).height(); $(this).after($().css({width: w, height: h, bac
 代码如下:








jQuery(function ($) {
$("img").load(function () {
var w = $(this).width(),
h = $(this).height();
$(this).after($("").css({"width": w, "height": h, "backgroundColor": "blue"}));
var ctx = $(this).next("canvas")[0].getContext("2d");
ctx.drawImage($(this)[0], 0, 0, w, h);
});
});







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

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

文档

canvas、drawImage的问题,高手速进_html/css

canvas、drawImage的问题,高手速进_html/css_WEB-ITnose:代码如下: jQuery(function ($) { $(img).load(function () { var w = $(this).width(), h = $(this).height(); $(this).after($().css({width: w, height: h, bac
推荐度:
标签: 问题 的问题 html
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top