canvas聚焦

最新推荐文章于 2024-05-08 18:29:22 发布

原创最新推荐文章于 2024-05-08 18:29:22 发布 · 856 阅读

0 ·

CC 4.0 BY-SA版权

本文为艾夏SEO博主原创文章，未经博主允许不得转载。

文章标签：

#canvas #聚焦

Canvas 专栏收录该内容

7 篇文章

订阅专栏

这篇博客深入探讨了HTML5 Canvas元素的聚焦方法，包括如何通过JavaScript实现元素获取焦点、交互增强及无障碍性提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<canvas width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');

canvas.onmouseover = function(){
canvas.onmousemove = function(ent){
//清空画布
ctx.clearRect(0,0,canvas.width,canvas.height);
//画布变黑
ctx.fillRect(0,0,canvas.width,canvas.height);

var e = ent ||event;

var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;

ctx.beginPath();
ctx.arc(x,y,100,0,Math.PI * 2,false);
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.save();
//之后的图片进行裁剪
ctx.clip();

ctx.font = '400px 微软雅黑';
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.fillStyle = 'red';
ctx.fillText('曾', 0, 0);
ctx.restore();
}
}

</script>