Добавить контент на изображение с холстом

0

Мой клиент хочет показать эмиссионную метку на своем сайте электронной коммерции. Ярлык выглядит следующим образом:

Изображение 174551

И есть 448 возможных вариантов этого со стрелками, указывающими на разные значения.

Мне было интересно, было бы лучше иметь только базовый образ этого (без стрелок), а затем добавить на него контент.

Как мне это сделать с помощью холста? Я знаю, как рисовать линию, используя холст, но об этом. Должен ли я использовать стороннюю библиотеку для этого? Я уже использую jQuery, но это не приведет меня никуда.

Итак, tl; dr;

Поместите 3 "стрелки" на изображение и заполните их текстом. Как правильно выровнять стрелки?

Теги:
canvas

1 ответ

0
Лучший ответ

Вы могли бы выполнить свою задачу разными способами.

Вот пример использования вашего html-холста, предлагающего изображение, нарисованное на холсте без стрелок, а затем с помощью холстов рисовать команды для применения стрелок:

http://jsfiddle.net/m1erickson/u8TCv/

Изображение 174551

Пример кода:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/emission.png";
    function start(){
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.drawImage(img,0,0);
        drawArrow(91,166,56,36,15,"C");
    }

    function drawArrow(x,y,w,h,pointWidth,text){
        // arrow
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+pointWidth,y-h/2);
        ctx.lineTo(x+w,y-h/2);
        ctx.lineTo(x+w,y+h/2);
        ctx.lineTo(x+pointWidth,y+h/2);
        ctx.closePath();
        ctx.fillStyle="black";
        ctx.fill();
        // text
        ctx.font="36px arial black";
        ctx.fillStyle="white";
        ctx.fillText(text,x+pointWidth+5,y+h/3);
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
  • 0
    Я бы дал тебе миллион голосов, если бы мог! Спасибо! Мне удалось создать что-то самостоятельно, но это гораздо проще, чем я думал.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню