带文字的HTML帆布

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，
• 矩形，
• 弧，
• 等...

六边形是六正多边形。

以下是如何绘制一个六边形使用绘图命令和一些数学的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(); 
}