Question

我正在学画画画，现在我有任务。我需要在内圈中添加图像。图像位置需要在圆圈内。我也用这篇文章附上了图片。我的代码是：

            <!DOCTYPE html>
            <html>
            <body>

            <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
            Your browser does not support the HTML5 canvas tag.
            </canvas>

            <script>
            var c =  document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.fillStyle = "green";
            ctx.fillRect(0,0,200,100);

            var cicleT = document.getElementById("myCanvas");
            var dtx = cicleT.getContext("2d"); 
            dtx.arc(95,50,40,0,2*Math.PI);
            dtx.stroke();
            dtx.fillStyle = "red";
            dtx.fill(); 

            dtx.fillStyle = "black"; // font color to write the text with
              var font = "bold 13px serif";
              dtx.font = font;
              dtx.textBaseline = "bottom";
              dtx.fillText("Bangladesh",50,50, 95 ,25);

            </script>

            </body>
            </html>

Answer 1

您可以使用ctx.clip剪切您想要绘制的区域，并在该区域上细化以下操作，记得在完成需要改进的作品时恢复。

＆＃13;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 200, 100);

ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle = "red";
ctx.fill(); 

// For safety, I move the draw image and draw text to image.onload.
var image = document.createElement('img');
image.onload = function() {
  var iw = image.width;
  var ih = image.height;
  var r = Math.sqrt(Math.pow(iw/2, 2) + Math.pow(ih/2, 2));
  var ratio = 40 / r;
  var tw = iw * ratio;
  var th = ih * ratio;
  
  // Use the same ctx is ok.
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
  // Save the current state of context, which is not clipped yet.
  ctx.save();
  
  // Clip by the stroke.
  ctx.clip();
  // Draw image.
  
  // 
  ctx.drawImage(image, 0, 0, iw, ih, 95 - tw/2, 50 - th/2, tw, th);
  
  // Restore the context, otherwise the text will also be clipped.
  ctx.restore();
  
  
  ctx.fillStyle = "black"; // font color to write the text with
  var font = "bold 13px serif";
  ctx.font = font;
  ctx.textBaseline = "bottom";
  ctx.fillText("Bangladesh", 50, 50, 95, 25);
};

image.src = "https://i.stack.imgur.com/jy3YL.jpg";

＆＃13;

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

＆＃13;

在画布圈内添加图像

1 个答案: