[英]Canvas use a letter instead of a shape?
I have written up an example, being new to canvas I need help transforming a basic circle into a letter. 我写了一个例子,对画布不熟悉我需要帮助将基本圆转换成字母。
Here is the code you will see in the fiddle. 这是你将在小提琴中看到的代码。 Note the circle drawing is what is in the center of the canvas, I am trying to use a letter like B with a cool font in place of the circle, I am just not sure how to implement this.
请注意,圆形绘图是画布中心的内容,我试图使用像B这样的字母代替圆形的酷字体,我只是不确定如何实现它。
So just imagine where the circle is a letter being in that spot, still transparent with a rectangle overlaying the image with the color rgba(255,255,255,0.7)
. 所以想象一下圆圈是那个位于该位置的字母,仍然是透明的,矩形覆盖图像的颜色为
rgba(255,255,255,0.7)
。
var canvas = document.getElementById('c');
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
/**
* Your drawings need to be inside this function otherwise they will be reset when
* you resize the browser window and the canvas goes will be cleared.
*/
drawStuff();
}
resizeCanvas();
function drawStuff() {
if (canvas.getContext) {
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
// Full rectangle
context.fillStyle = 'rgba(255,255,255,0.7)';
context.fillRect(0, 0, window.innerWidth, window.innerHeight);
// Inner circle
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// Add a letter instead of a circle?
// Hmm
context.fillStyle = 'rgba(0,0,0,1)';
context.globalCompositeOperation = 'destination-out';
context.fill();
}
}
why not 为什么不
context.fillStyle = 'rgba(0,0,0,1)';
context.strokeStyle = "#F00";
context.font = "bold 60pt Arial";
context.globalCompositeOperation = 'destination-out';
context.fillText("B", 20, 50);
Here again with centering 这里再次以居中为中心
context.fillStyle = 'rgba(0,0,0,1)';
context.globalCompositeOperation = 'destination-out';
context.textAlign = 'center';
context.font="150px Times";
context.fillText("A",centerX,centerY+40);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.