html5 canvas画图手电筒效果

最新推荐文章于 2023-03-24 10:31:10 发布

微枫1993

最新推荐文章于 2023-03-24 10:31:10 发布

阅读量1.7k

点赞数

分类专栏： html5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/xiongqiangwin1314/article/details/48573359

版权

实现效果为鼠标移动，在鼠标的一定范围之内显示隐藏图片的一部分

<!DOCTYPE html>
<html>
	<head>
		<style>
		 body{ margin:0;padding:0;}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="1349" height="600">this is a image</canvas>
		<!--img id="hideImg" src="IMG_8696.jpg" style="position:absolute; top:10px; left:300px; opacity:0.3;"/-->
		<script>
			var canvas=document.getElementById('canvas');
			var canvasImg=new Image();
			var stepClear=1;
			if(canvas.getContext){
				var context=canvas.getContext('2d');
				context.fillStyle="white";
				context.strokeStyle="black";
			}
			function drawCanvasImg(event){
				var e=event || window.event;
				var posX=e.clientX;
				var posY=e.cl

最低0.47元/天解锁文章

微枫1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas画图手电筒效果

实现效果为鼠标移动，在鼠标的一定范围之内显示隐藏图片的一部分 body{ margin:0;padding:0;} this is a image var canvas=document.getElementById('canvas'); var canvasImg=new Image(); var stepClear=1;
复制链接

扫一扫