首页 > 其他分享 >【Canvas与艺术】模拟八一电影制片厂电影片头效果

【Canvas与艺术】模拟八一电影制片厂电影片头效果

时间：2024-03-31 22:00:43浏览次数：23  
标签：function Canvas ctx canvas 电影片 HEIGHT WIDTH 八一电影制片厂 stage

【缘起】

八一厂每部电影前都有其专有开头，如：https://www.ixigua.com/6799821997258834440?logTag=2eacce76401e13f9efe7，让人印象深刻。

这个片头可以用canvas模拟一部分。

【关键点】

线型放射状粒子系统的运作。

立体感五角星的绘制。

【图例】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>模拟八一电影制片厂片头</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
	 </head>

     <body onl oad="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="10px" height="10px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 边长
const WIDTH=1000;
const HEIGHT=540;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
	// 获得canvas对象
	var canvas=document.getElementById('myCanvas');  
	canvas.width =WIDTH;
	canvas.height=HEIGHT;

	// 初始化canvas的绘图环境
	ctx=canvas.getContext('2d');  
	ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央

	// 准备
	stage=new Stage();	
	stage.init();

	// 开幕
    animate();
}

// 播放动画
function animate(){    
    stage.update();	
	stage.paintBg(ctx);
	stage.paintFg(ctx);	 

	// 循环
    if(true){
		window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
	// 粒子数量
	this.starCnt=600;

	// 粒子数组
	this.points=[];

	// 下面两个量用来控制五个角依次闪亮
	this.currLightPos=0;
	this.lightIdx=0;

	// 初始化
	this.init=function(){
		// 放射性原始数组
		var arr=[];
		for(let i=0;i<360;i++){
			let theta=i*Math.PI*2/360;
			var pt={};
			pt.x=54*Math.cos(theta);
			pt.y=54*Math.sin(theta);
			pt.theta=theta;
			arr.push(pt);
		}


		for(let i=0;i<this.starCnt;i++){
			// 随机取原始数组的一个
			let idx=Math.floor(Math.random()*arr.length);
			let pt=arr[idx];

			// 创建点
			var point={};
			point.x=arr[idx].x;
			point.y=arr[idx].y;
			point.step=Math.random()*10+1;
			point.theta=arr[idx].theta;
			point.xInitial=arr[idx].x;
			point.yInitial=arr[idx].y;

			// 放入粒子数组
			this.points.push(point);
		}
	}

	// 更新
	this.update=function(){
		const DIS=WIDTH/2*WIDTH/2+HEIGHT/2*HEIGHT/2;

		for(i=0;i<this.starCnt;i++){
			var pt=this.points[i];

			pt.x+=pt.step*Math.cos(pt.theta);
			pt.y+=pt.step*Math.sin(pt.theta);

			var distance=pt.x*pt.x+pt.y*pt.y;
			
			// 越过对角线长度一半即回到初始位置
			if(distance>DIS)
			{	pt.x=pt.xInitial;
				pt.y=pt.yInitial;
			}
		}

		// 累计五百变一次
		this.lightIdx++;
		this.currLightPos=Math.floor(this.lightIdx/100)
		if(this.lightIdx>500){
			this.lightIdx=0;
		}
	}

	// 画背景
	this.paintBg=function(ctx){
		// 清屏
		ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);	

		ctx.fillStyle = "rgba(0, 64, 128, 0.8)";// 加上半透明蒙层，字和光源便出现了残影效果
		ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);		
	}

	// 画前景
	this.paintFg=function(ctx){	
		
		// 用直线模拟放射状光芒
		for(let i=0;i<this.starCnt;i++){
			var pt=this.points[i];
			
			ctx.beginPath();
			ctx.moveTo(pt.x,pt.y);
			ctx.lineTo(pt.x-20*Math.cos(pt.theta),pt.y-20*Math.sin(pt.theta));
			ctx.closePath();
			ctx.lineWidth=2;
			ctx.strokeStyle="white";
			ctx.stroke();
		}

		// 渐变色圈（可不加）
        var rgnt=ctx.createRadialGradient(0,0,30,0,0,80);         
        rgnt.addColorStop(0,"rgb(255,255,255)");
        rgnt.addColorStop(1,"rgba(0,64,128,0.001)");
        ctx.fillStyle=rgnt;
        ctx.beginPath();
        ctx.arc(0,0,80,0,2*Math.PI,true);
        ctx.closePath();
        ctx.fill();

		// 画白底五角星
		draw5Star(ctx,0,0,90,"white");

		// 画立体五角星
		const R=80;// 五角星外角半径
		const r=30;// 五角星内角半径
		ctx.save();
		ctx.rotate(Math.PI/10);
		for(let i=0;i<5;i++){
			var alpha=i*2*Math.PI/5-Math.PI/5;
			var beta=i*2*Math.PI/5;			

			// 画红色五片
			var x1=R*Math.cos(alpha);
			var y1=R*Math.sin(alpha);
			var x2=r*Math.cos(beta);
			var y2=r*Math.sin(beta);
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(x1,y1);
			ctx.lineTo(x2,y2);
			ctx.closePath();
			if(this.currLightPos==i){
				ctx.fillStyle="red";
			}else{
				ctx.fillStyle="rgb(206,0,0)";
			}
			
			ctx.fill();

			// 画黄色五片
			var gama=(i)*2*Math.PI/5+Math.PI/5;
			var x3=R*Math.cos(gama);
			var y3=R*Math.sin(gama);

			ctx.beginPath();
			ctx.moveTo(0,0);			
			ctx.lineTo(x3,y3);
			ctx.lineTo(x2,y2);
			ctx.closePath();
			if(this.currLightPos==i){
				ctx.fillStyle="rgb(249,249,0)";
			}else{
				ctx.fillStyle="rgb(255,211,6)";
			}
			ctx.fill();
		}
		ctx.restore();

		// 下方文字说明
		ctx.save();
		ctx.shadowColor = 'black';
		ctx.shadowOffsetX = 5;
		ctx.shadowOffsetY = -2;
		ctx.shadowBlur = 5;
		ctx.textAlign="center";
		ctx.textBaseLine="Middle";
		ctx.font="40px Microsoft YaHei UI";
		ctx.fillStyle="white";    
		ctx.fillText('模拟八一电影制片厂电影片头',0,200);


		ctx.font="10px Microsoft YaHei UI";
		ctx.fillStyle="white";    
		ctx.fillText('逆火原创',450,260);

		ctx.restore();
	}
}

// 画实心五角星的函数
function draw5Star(ctx,x,y,r,color){
	ctx.save()
	ctx.translate(x-r,y-r);	
	ctx.beginPath();
	ctx.moveTo(r, 0);
	ctx.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
	ctx.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
	ctx.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
	ctx.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
	ctx.lineTo(r, 0);
	ctx.closePath();
	ctx.fillStyle=color;
	ctx.fill();
	ctx.restore();
}

/*--------------------------------------------------------------------------
十人烧香九为财，不知财从何处来？
为人有德天长佑，行善无求福自来。
--------------------------------------------------------------------------*/
//-->
</script>

END

标签：function,Canvas,ctx,canvas,电影片,HEIGHT,WIDTH,八一电影制片厂,stage
From： https://blog.csdn.net/River_Sun/article/details/137092609

相关文章

  • 纯 canvas 版转盘
    简介纯canvas画布实现的转盘，使用uni-app实现，理论上是支持全端（如微信小程序、支付宝小程序、抖音小程序等等）部署，可能存在样式上差异直接下载后使用HbuilderX导入即可使用使用场景：轮盘、转盘、抓阄、抽奖、替你做决定、做选择、今天吃什么、周末去哪里玩等等都可......
  • canvas签名图片上传及入库问题
    工作需要，asp+access建了个简单信息交互平台，表单填报、签名、及查看只能在手机上进行。已实现Base64直接入数据库。有Jccscxj.asp(首页表单填报)、Jccscxjup.asp(手写签名页面)、ajax-cscxj.asp(入库页面)、anco.asp(数据库联接)、cscxjck.asp(填报项查看)等五个asp文件、jcxj.mdb......
  • 可视化学习：实现Canvas图片局部放大镜
    前言最近我在可视化课程中学习了如何在Canvas中利用像素处理来实现滤镜效果，在这节课程的结尾留了一道局部放大镜的题目，提示我们用像素处理的方式去实现这个效果，最终实现随着鼠标移动将图片局部放大，本着把学到的内容落地实践的想法，我就去思考了一番，但很不幸，我思考了好几天也没思考......
  • WPF C# create canvas and draw ellipse in canvas
    usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;usingSystem.Windows;usingSystem.Windows.Controls;usingSystem.Windows.Data;usingSystem.Windows.Documents;usingSystem.Windows.Input;......
  • 想实现Canvas元素拖拽？速来一探究竟，你也可以轻松做到！
    元素拖拽是一种常见的交互设计模式，在许多场景下都有应用：地图打标、画板图形拖拽、可视化组件拖拽、交互式表格等。实现元素拖拽的核心在于监听和响应鼠标事件，模拟canvas元素事件，并同步更新Canvas绘制。主要需实现：创建元素坐标转换（鼠标事件坐标和canvas坐标转换）事件监听、元......
  • 纯前端实现 JPG 图片压缩 | canvas
    在线Demo体验地址→:https://demos.sugarat.top/pages/jpg-compress/前言在迭代图床应用时，需要用到图片压缩，在之前分享了使用UPNG.js压缩PNG图片，这里记录分享一下如何处理JPG图片。搜罗调研了一圈，JPG图片的处理，基本都是围绕canvas展开的。掘金：前端实现图片压......
  • WPF canvas draw lines via brush
    //xaml<Windowx:Class="WpfApp11.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.mic......
  • CanvasRenderingContext2D: setLineDash() method格式说明
    定义setLineDash(segments)segments一个数组，用于指定交替绘制直线和间隙的距离（以坐标空间单位表示）。如果数组中元素的个数是奇数，数组中的元素会被复制并连接起来。例如，[5,15,25]将变成[5,15,25,5,15,25]。如果数组为空，破折号列表将被清除，行描边将恢复为实线。例子......
  • tkinter画布canvas绘制图片不显示
    tkinter画布canvas绘制图片不显示首次编辑：24/3/22/13:59最后编辑：24/3/22/14:08原因与解决办法在canvas中创建图片一般如下：fromtkinterimport*root=Tk()c=Canvas(root)#在canvas中创建图片image=PhotoImage(file="img/熊猫人.png")canvas.create_image(100,10......
  • vue项目中使用html2canvas插件
    一、生成海报图vue项目中使用html2canvas插件，实现将编写的html代码转成可以保存的图片，只需要以下四步。1、在vue项目中安装插件npmihtml2canvas 2、在需要使用到的页面引入html2canvas插件importhtml2canvasfrom“html2canvas”; 3、按照设计图编写html代码<d......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99