小程序
小游戏
企业微信
微信支付
扫描小程序码分享
使用drawImage接口把一个100 * 100的图像画到一个50 * 50的画布怎么按比例缩放,让图像全部显示在画布
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
这是因为您在Image(width, height)构造函数中将其设置为image的宽度和高度属性,从而对其进行了硬编码。
Image(width, height)
image
ctx.drawImage(img, dx, dy [, dwidth ,dheight])将使swidth和sheight默认为你的形象的naturalWidth和naturalHeight,而不是他们的width和height的。
ctx.drawImage(img, dx, dy [, dwidth ,dheight])
swidth
sheight
naturalWidth
naturalHeight
width
height
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
答案
ctx.save();
let sx = 111
let sy = 180
let headWidth = 80
let headHeight = 80
let headX = (headWidth / 2) + sx
let headY = (headHeight / 2) + sy
ctx.arc(headX, headY, headHeight / 2, 0, Math.PI * 2,
false
);
ctx.clip();
ctx.drawImage(image, sx, sy, headWidth, headHeight);
// ctx.restore();
ctx.draw(
true
)
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
这是因为您在
Image(width, height)
构造函数中将其设置为image
的宽度和高度属性,从而对其进行了硬编码。ctx.drawImage(img, dx, dy [, dwidth ,dheight])
将使swidth
和sheight
默认为你的形象的naturalWidth
和naturalHeight
,而不是他们的width
和height
的。答案
ctx.save();
let sx = 111
let sy = 180
let headWidth = 80
let headHeight = 80
let headX = (headWidth / 2) + sx
let headY = (headHeight / 2) + sy
ctx.arc(headX, headY, headHeight / 2, 0, Math.PI * 2,
false
);
ctx.clip();
ctx.drawImage(image, sx, sy, headWidth, headHeight);
// ctx.restore();
ctx.draw(
true
)