canvas系类-加载/裁剪图片(二)

最新推荐文章于 2021-07-22 20:27:32 发布

面条请不要欺负汉堡

最新推荐文章于 2021-07-22 20:27:32 发布

阅读量424

点赞数

分类专栏： html5 文章标签： canvas clip 图片裁剪探照灯裁剪

本文链接：https://blog.csdn.net/gao_xu_520/article/details/58130161

版权

html5 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

图片裁剪：clip() 方法从原始画布中剪切任意形状和尺寸。

裁切路径和普通的 canvas图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

根据以上，来个列子

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>裁切路径</title>
</head>
<body>
<div>
	<canvas id="canvas"></canvas>
</div>
<script type="text/javascript">

	//1.获取canvas上下文，
	var dom=document.getElementById("canvas");
	canvas.width=800;
	canvas.height=800;
	var	ctx=dom.getContext('2d');//获取canvas上下文的内容
	ctx.beginPath();
	ctx.fillRect(0,0,canvas.width,canvas.height);

	//裁剪
	ctx.beginPath();
	ctx.arc(400,400,150,0,Math.PI*2);
	ctx.fillStyle="#fff";
	ctx.fill();
	ctx.clip();


	ctx.font="bold 150px Arial";
	ctx.textAlign="center"; 
	ctx.textBaseline="middle"; 
	ctx.fillStyle="#058";
	ctx.fillText("CANVAS！",canvas.width/2,canvas.height/2);
</script>
</body>
</html>

根据这个可以做出探照灯的效果

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<div>
	<canvas id="canvas"></canvas>
</div>
<script type="text/javascript">
//设置裁剪的参数
var searchLight={x:400,y:400,radius:150,vx:Math.random()*5+10,vy:Math.random()*5+10}
	//1.获取canvas上下文，
	var dom=document.getElementById("canvas");
	canvas.width=800;
	canvas.height=800;
	var	ctx=dom.getContext('2d');//获取canvas上下文的内容
	setInterval(
	    function(){
	        draw(ctx);
	        update(canvas.width,canvas.height);
	    },
	    50
	);  
	function draw(ctx){
        // var canvas = ctx.canvas;
        ctx.clearRect(0,0,canvas.width,canvas.height);

        ctx.save();
        //画布的颜色
        ctx.beginPath();
		ctx.fillRect(0,0,canvas.width,canvas.height);
		//裁剪
		ctx.beginPath();
		ctx.arc(searchLight.x,searchLight.y,searchLight.radius,0,Math.PI*2);
		ctx.fillStyle="#fff";
		ctx.fill();
		ctx.clip();

        ctx.font="bold 150px Arial";
		ctx.textAlign="center"; 
		ctx.textBaseline="middle"; 
		ctx.fillStyle="#058";
		ctx.fillText("CANVAS！",canvas.width/2,canvas.height/1.5);
		ctx.fillText("CANVAS！",canvas.width/2,canvas.height/2);
		ctx.fillText("CANVAS！",canvas.width/2,canvas.height/4);

		ctx.restore();
    }
    function update(canvasWidth, canvasHight){
        searchLight.x += searchLight.vx;
        searchLight.y += searchLight.vy;

        if( searchLight.x - searchLight.radius<=0 ){
            searchLight.vx = -searchLight.vx;
            searchLight.x = searchLight.radius;
        }
        if( searchLight.x + searchLight.radius>=canvasWidth ){
            searchLight.vx = -searchLight.vx;
            searchLight.x = canvasWidth-searchLight.radius;
        }
        if( searchLight.y - searchLight.radius<=0 ){
            searchLight.vy = -searchLight.vy;
            searchLight.y = searchLight.radius;
        }
        if( searchLight.y + searchLight.radius>=canvasHight ){
            searchLight.vy = -searchLight.vy;
            searchLight.y = canvasHight-searchLight.radius;
        }
    }
</script>
</body>
</html>

面条请不要欺负汉堡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas系类-加载/裁剪图片(二)

图片裁剪：clip() 方法从原始画布中剪切任意形状和尺寸。裁切路径和普通的 canvas图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过
复制链接

扫一扫