HTML CANVAS里面有文字

Question

元素画布是否可以放置文本或图标。 例如：

<canvas id="hexmap" width="200" height="200">
    <img src="facebook.png" />
</canvas>

我想创建六边形容器和插入图标或文本。 对不起我的英文

Answer 1

要绘制图像，不要像在html中那样将img元素包装在canvas元素中。

相反，Html Canvas是一个绘图表面。

您发出绘图命令，并在画布上绘制像素。

演示：http://jsfiddle.net/m1erickson/qwy5x/

要在画布上绘制图像，请执行以下操作：

// draw yourImage at xy=[20,20]

context.drawImage(yourImage,20,20);

要在画布上绘制文字，请执行以下操作：

// draw "Hello World" at xy=[20,20]

context.fillText("Hello World",20,20);

有许多绘图命令：

• 的drawImage，
• fillText方法，
• moveTo，
• lineTo，
• rect，
• 电弧
• 等...

六边形是六边形正多边形。

以下是如何使用绘图命令和一些小数学在html画布上绘制六边形：

function drawHexagon(cx,cy,size,centerX,centerY){
    var sideCount=6;  // hexagon
    var PI=Math.PI;
    ctx.beginPath();
    ctx.moveTo(cx+size*Math.cos(0), cy+size*Math.sin(0));          
    for (var i = 1; i <= sideCount;i += 1) {
        var r=i*2*PI/sideCount;
        var x=parseInt(cx+size*Math.cos(r));
        var y=parseInt(cy+size*Math.sin(r));
        ctx.lineTo(x,y);
    }
    ctx.fillStyle="blue";
    ctx.strokeStyle="gray";
    ctx.lineWidth=2;
    ctx.stroke();
    ctx.fill();  
}