<body>
<canvas id="draw" width="600px" heigth="600px"></canvas>
<body>
//以下是引用JQ后的写法
var yImg=new Image();
yImg.onload=function(){
draw(this);
};
yImg.style.width="200px"; //→没有生效
yImg.style.height="200px";//→没有生效
yImg.src="../image/01.gif";//图片原始尺寸是791px*341px
var oGc=$("#draw").get(0).getContext("2d");
function draw(obj){
var bg=oGc.createPattern(obj,"repeat");
oGc.fillStyle=bg;
oGc.fillRect(0,0,400,400);
}
疑问:为什么yImg制定的属性“width:200px;height:200px;”没有生效?
canvas图片设置宽高是在画图中设置,你在图片加载设置和canvas画图的宽高是没有联系的。你要想画出来的宽高是200*200,就要在画图过程中设置。
1、你现在设置的宽高和画布中要绘画的图片快高是没有关系的,画布中图片宽高需要在画布中设置。
2、你需要画布中图的宽高为200*200,需要在画布中设置。