Нарисуйте изображение с прозрачным фоном на холсте - PullRequest
Новая
       21

Нарисуйте изображение с прозрачным фоном на холсте

0 голосов
/ 13 ноября 2018

Мне нужно нарисовать изображение с прозрачным фоном на холсте.У меня есть код, который должен сделать это: 

var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/7JXBD.png"; //transparent png
<canvas id="canvasId"></canvas>

Но фон не прозрачен:

screenshot

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Ваш код работает отлично - вам просто нужно изображение с прозрачным фоном - как этот знак вопроса: 

var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');


ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png
<canvas id="canvasId"></canvas>

И чтобы доказать, что это не просто белое фоновое изображение, я установил фоновое изображение тела на red: 

var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');


ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png
body {
    background-color: red;
}
<canvas id="canvasId"></canvas>
0 голосов
/ 13 ноября 2018

Изображение, которое вы пытаетесь отобразить, не является прозрачным, оно просто имеет прозрачный клетчатый фон.

Ссылку на изображение с прозрачным фоном можно найти здесь

Использование этой ссылки решает вашу проблему: 

var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');


ctx.fillRect(50, 50, 500, 500); // something in the background

var img = new Image();
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"; //transparent png
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}
canvas {
  border: 1px solid black;
}
<canvas id="canvasId" height="300" width="500"></canvas>
...