<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>
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>