[英]Display text on Canvas in Mouse over
目前,我正在研究以下示例https://codepen.io/jkiss/pen/OVEeqK,在这里我更改了代码以显示在画布上
var canvas = document.getElementById('nokey');
var ctx = canvas.getContext('2d');
ctx.fillText("StacOverFlow",30,80);
但是我无法使用上面的代码显示文本。 任何人都可以帮助显示文本。
在示例https://codepen.io/jkiss/pen/OVEeqK中 ,您必须添加一些代码来呈现函数,如下所示:
实时示例: https : //codepen.io/siamand/pen/BdPBMq
// Render
function render(){
ctx.clearRect(0, 0, can_w, can_h);
renderBalls();
renderLines();
updateBalls();
addBallIfy();
addCustomStuff();
window.requestAnimationFrame(render);
}
function addCustomStuff(){
//if(mouse_in){ // IF condition for show text when mouse_in
ctx.fillStyle = 'red';
ctx.fillText("StackOverflow",mouse_ball.x,mouse_ball.y);
//}
}
您需要添加以下html代码:
<canvas id="nokey" width="800" height="800"> Your Browser Don't Support Canvas, Please Download Chrome ^_^`` </canvas>
这是因为当您调用var canvas = document.getElementById('nokey');
您尝试在示例中获取名为“ nokey”的画布。
您还需要使用ctx.fillStyle
和ctx.font
在画布上显示字体。
var canvas = document.getElementById('nokey'), can_w = parseInt(canvas.getAttribute('width')), can_h = parseInt(canvas.getAttribute('height')), ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "blue"; ctx.font = "bold 16px Arial"; ctx.fillText("StackOverFlow", 30, 80);
<canvas id="nokey" width="800" height="800"> Your Browser Don't Support Canvas, Please Download Chrome ^_^`` </canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.