Question

我的客户希望在他的电子商务网站上显示排放标签。标签看起来像这样：

enter image description here

这有448种可能的变体，箭头指向不同的值。

我想知道是否只有一个这样的基本图像（没有箭头），然后在其上添加添加内容会更好。

我如何使用画布来做到这一点？我知道如何使用画布绘制一条线，但这就是它。我应该使用第三方库吗？我已经在使用jQuery，但这不会让我到处都是。

所以，tl; dr;

在图像上放置3个“箭头”，并用文字填充它们。如何正确对齐箭头？

Answer 1

你可以通过多种方式完成任务。

这是一个使用你的html画布建议在没有箭头的情况下在画布上绘制的图像然后使用画布绘制命令来应用箭头的示例：

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

enter image description here

示例代码：

<!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>

使用画布在图像上添加内容

1 个答案: