javascript - 如何更改新图像对象的不透明度
问题描述
我正在尝试降低画布上绘制的图像的不透明度,但它不起作用
var img = new Image();
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext('2d');
img.src = './picture.jpg';
canvas.width = img.width;
canvas.height = img.height;
img.style.opacity = 0.5;
ctx.drawImage(img, 30, 30, canvas.width, canvas.height);
解决方案
/// only image will have alpha affected:
context.globalAlpha = 0.5;
context.drawImage(image, x, y);
context.globalAlpha = 1.0;
推荐阅读
- python - 如何获得 BeautifulSoup 对象的唯一 css 选择器?
- ios - xcodebuild:错误:无法在 CI 上构建工作区
- .net - nginx 入口控制器日志 499
- php - Cloudinary上传php失败,如何解决?
- trimble-maps - Trimble MAPS API 缩放正在影响整个网页
- laravel-5 - Laravel 多对多附加?
- sql - SQL Server:SUM 数值,但保留字符串不变
- angular - 打字稿更新后构建失败
- javascript - 如何防止 webpack 在 eslint 错误上构建失败?
- php - 数据透视表选择 LARAVEL