createjs bitmap 画出的图会被拉伸,请问大神这是什么问题?

createjs bitmap 画出的图会被拉伸,请问大神这是什么问题?

代码:

var stage=new createjs.Stage("demoCanvas");
var demoView=new createjs.Container();
stage.addChild(demoView);

var image=new Image();
image.src="images/1.jpg";
image.onload=handleImageLoad;

function handleImageLoad(e){
    var bitmap=new createjs.Bitmap(e.target);
    demoView.addChild(bitmap);
    stage.update();
}

效果图:图片描述

原图是这样的:图片描述

阅读 5.5k
2 个回答
新手上路,请多包涵

这样写:<canvas id="" width="1200" height="700">游戏背景</canvas>
不要把width和height另写在样式中,width和height不要加px,这个真的坑

你把你的代码修改一下
<canvas id="demoCanvas" width="图片宽度px" height="图片高度px"></canvas>

canvas尺寸理论
canvas中定义width、height跟在style中定义width和height是不同的,canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确,就被设置成默认值(width:300px,height:150px)。可以利用style的width和height来缩放canvas

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进