Canvas模拟火焰燃烧效果示例

2024-03-23 21:50

本文主要是介绍Canvas模拟火焰燃烧效果示例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

canvas实例应用100+ 专栏提供canvas的基础知识,高级动画,相关应用扩展等信息。
canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。

文章目录

    • 示例效果
    • 源代码
    • canvas基本属性
    • canvas基础方法

canvas能做好很多事情,能显示各种动画。这里是模拟火焰燃烧效果的示例。

示例效果

在这里插入图片描述

源代码

							
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas模拟火焰演示</title><style>
@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
html, body {margin:0;padding:0;height: 100%;
}
</style></head>
<body>
<canvas id="zjcopy"></canvas><script>
var Fire  = function(){this.canvas 		= document.getElementById('zjcopy');this.ctx 			= this.canvas.getContext('2d');this.canvas.height 	= window.innerHeight;this.canvas.width 	= window.innerWidth;this.aFires 		= [];this.aSpark 		= [];this.aSpark2 		= [];this.mouse = {x : this.canvas.width * .5,y : this.canvas.height * .75,}this.init();}
Fire.prototype.init = function()
{this.canvas.addEventListener('mousemove', this.updateMouse.bind( this ), false);}
Fire.prototype.run = function(){this.update();this.draw();if( this.bRuning )requestAnimationFrame( this.run.bind( this ) );}
Fire.prototype.start = function(){this.bRuning = true;this.run();}
Fire.prototype.stop = function(){this.bRuning = false;}
Fire.prototype.update = function(){this.aFires.push( new Flame( this.mouse ) );this.aSpark.push( new Spark( this.mouse ) );this.aSpark2.push( new Spark( this.mouse ) );for (var i = this.aFires.length - 1; i >= 0; i--) {if( this.aFires[i].alive )this.aFires[i].update();elsethis.aFires.splice( i, 1 );}for (var i = this.aSpark.length - 1; i >= 0; i--) {if( this.aSpark[i].alive )this.aSpark[i].update();elsethis.aSpark.splice( i, 1 );}for (var i = this.aSpark2.length - 1; i >= 0; i--) {if( this.aSpark2[i].alive )this.aSpark2[i].update();elsethis.aSpark2.splice( i, 1 );}}Fire.prototype.draw = function(){this.ctx.globalCompositeOperation = "source-over";this.ctx.fillStyle = "rgba( 15, 5, 2, 1 )";this.ctx.fillRect( 0, 0, window.innerWidth, window.innerHeight );this.grd = this.ctx.createRadialGradient( this.mouse.x, this.mouse.y - 200,200,this.mouse.x, this.mouse.y - 100,0 );this.grd.addColorStop(0,"rgb( 15, 5, 2 )");this.grd.addColorStop(1,"rgb( 30, 10, 2 )");this.ctx.beginPath();this.ctx.arc( this.mouse.x, this.mouse.y - 100, 200, 0, 2*Math.PI );this.ctx.fillStyle= this.grd;this.ctx.fill();this.ctx.font = "15em Amatic SC";this.ctx.textAlign = "center";this.ctx.strokeStyle = "rgb(50, 20, 0)";this.ctx.fillStyle = "rgb(120, 10, 0)";this.ctx.lineWidth = 2;this.ctx.strokeText("Fire",this.canvas.width/2, this.canvas.height * .72 );this.ctx.fillText("Fire",this.canvas.width/2, this.canvas.height * .72 );	this.ctx.globalCompositeOperation = "overlay";//or lighter or soft-lightfor (var i = this.aFires.length - 1; i >= 0; i--) {this.aFires[i].draw( this.ctx );}this.ctx.globalCompositeOperation = "soft-light";//"soft-light";//"color-dodge";for (var i = this.aSpark.length - 1; i >= 0; i--) {if( ( i % 2 ) === 0 )this.aSpark[i].draw( this.ctx );}this.ctx.globalCompositeOperation = "color-dodge";//"soft-light";//"color-dodge";for (var i = this.aSpark2.length - 1; i >= 0; i--) {this.aSpark2[i].draw( this.ctx );}}Fire.prototype.updateMouse = function( e ){this.mouse.x = e.clientX;this.mouse.y = e.clientY;//this.aFires.push( new Flame( this.mouse ) );}var Flame = function( mouse ){this.cx = mouse.x;this.cy = mouse.y;this.x = rand( this.cx - 25, this.cx + 25);this.y = rand( this.cy - 5, this.cy + 5);this.vy = rand( 1, 3 );this.vx = rand( -1, 1 );this.r = rand( 20, 30 );this.life = rand( 3, 6 );this.alive = true;this.c = {h : Math.floor( rand( 2, 40) ),s : 100,l : rand( 80, 100 ),a : 0,ta : rand( 0.8, 0.9 )}}
Flame.prototype.update = function()
{this.y -= this.vy;this.vy += 0.05;this.x += this.vx;if( this.x < this.cx )this.vx += 0.1;elsethis.vx -= 0.1;if(  this.r > 0 )this.r -= 0.1;if(  this.r <= 0 )this.r = 0;this.life -= 0.15;if( this.life <= 0 ){this.c.a -= 0.05;if( this.c.a <= 0 )this.alive = false;}else if( this.life > 0 && this.c.a < this.c.ta ){this.c.a += .08;}}
Flame.prototype.draw = function( ctx ){ctx.beginPath();ctx.arc( this.x, this.y, this.r * 3, 0, 2*Math.PI );ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a/20) + ")";ctx.fill();ctx.beginPath();ctx.arc( this.x, this.y, this.r, 0, 2*Math.PI );ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")";ctx.fill();}var Spark = function( mouse ){this.cx = mouse.x;this.cy = mouse.y;this.x = rand( this.cx -40, this.cx + 40);this.y = rand( this.cy, this.cy + 5);this.lx = this.x;this.ly = this.y;this.vy = rand( 1, 3 );this.vx = rand( -4, 4 );this.r = rand( 0, 1 );this.life = rand( 4, 5 );this.alive = true;this.c = {h : Math.floor( rand( 2, 40) ),s : 100,l : rand( 40, 100 ),a : rand( 0.8, 0.9 )}}
Spark.prototype.update = function()
{this.lx = this.x;this.ly = this.y;this.y -= this.vy;this.x += this.vx;if( this.x < this.cx )this.vx += 0.2;elsethis.vx -= 0.2;this.vy += 0.08;this.life -= 0.1;if( this.life <= 0 ){this.c.a -= 0.05;if( this.c.a <= 0 )this.alive = false;}}
Spark.prototype.draw = function( ctx ){ctx.beginPath();ctx.moveTo( this.lx , this.ly);ctx.lineTo( this.x, this.y);ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 2) + ")";ctx.lineWidth = this.r * 2;ctx.lineCap = 'round';ctx.stroke();ctx.closePath();ctx.beginPath();ctx.moveTo( this.lx , this.ly);ctx.lineTo( this.x, this.y);ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")";ctx.lineWidth = this.r;ctx.stroke();ctx.closePath();}rand = function( min, max ){ return Math.random() * ( max - min) + min; };
onresize = function () { oCanvas.canvas.width = window.innerWidth; oCanvas.canvas.height = window.innerHeight; };var oCanvas;
init = function()
{oCanvas = new Fire();oCanvas.start();}window.onload = init;
</script></body>
</html>

canvas基本属性

属性属性属性
canvasfillStylefilter
fontglobalAlphaglobalCompositeOperation
heightlineCaplineDashOffset
lineJoinlineWidthmiterLimit
shadowBlurshadowColorshadowOffsetX
shadowOffsetYstrokeStyletextAlign
textBaselinewidth

canvas基础方法

方法方法方法
arc()arcTo()addColorStop()
beginPath()bezierCurveTo()clearRect()
clip()close()closePath()
createImageData()createLinearGradient()createPattern()
createRadialGradient()drawFocusIfNeeded()drawImage()
ellipse()fill()fillRect()
fillText()getImageData()getLineDash()
isPointInPath()isPointInStroke()lineTo()
measureText()moveTo()putImageData()
quadraticCurveTo()rect()restore()
rotate()save()scale()
setLineDash()setTransform()stroke()
strokeRect()strokeText()transform()
translate()

这篇关于Canvas模拟火焰燃烧效果示例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/839611

相关文章

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

usaco 1.2 Transformations(模拟)

我的做法就是一个一个情况枚举出来 注意计算公式: ( 变换后的矩阵记为C) 顺时针旋转90°:C[i] [j]=A[n-j-1] [i] (旋转180°和270° 可以多转几个九十度来推) 对称:C[i] [n-j-1]=A[i] [j] 代码有点长 。。。 /*ID: who jayLANG: C++TASK: transform*/#include<

防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的

hdu4431麻将模拟

给13张牌。问增加哪些牌可以胡牌。 胡牌有以下几种情况: 1、一个对子 + 4组 3个相同的牌或者顺子。 2、7个不同的对子。 3、13幺 贪心的思想: 对于某张牌>=3个,先减去3个相同,再组合顺子。 import java.io.BufferedInputStream;import java.io.BufferedReader;import java.io.IOExcepti

【每日一题】LeetCode 2181.合并零之间的节点(链表、模拟)

【每日一题】LeetCode 2181.合并零之间的节点(链表、模拟) 题目描述 给定一个链表,链表中的每个节点代表一个整数。链表中的整数由 0 分隔开,表示不同的区间。链表的开始和结束节点的值都为 0。任务是将每两个相邻的 0 之间的所有节点合并成一个节点,新节点的值为原区间内所有节点值的和。合并后,需要移除所有的 0,并返回修改后的链表头节点。 思路分析 初始化:创建一个虚拟头节点

zeroclipboard 粘贴板的应用示例, 兼容 Chrome、IE等多浏览器

zeroclipboard单个复制按钮和多个复制按钮的实现方法 最近网站改版想让复制代码功能在多个浏览器上都可以实现,最近看网上不少说我们的代码复制功能不好用的,我们最近将会增加代码高亮等功能,希望大家多多支持我们 zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的

每日一题|牛客竞赛|四舍五入|字符串+贪心+模拟

每日一题|四舍五入 四舍五入 心有猛虎,细嗅蔷薇。你好朋友,这里是锅巴的C\C++学习笔记,常言道,不积跬步无以至千里,希望有朝一日我们积累的滴水可以击穿顽石。 四舍五入 题目: 牛牛发明了一种新的四舍五入应用于整数,对个位四舍五入,规则如下 12345->12350 12399->12400 输入描述: 输入一个整数n(0<=n<=109 ) 输出描述: 输出一个整数

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于

【算法专场】模拟(下)

目录 前言 38. 外观数列 算法分析 算法思路 算法代码 1419. 数青蛙 算法分析 算法思路 算法代码  2671. 频率跟踪器 算法分析 算法思路 算法代码 前言 在前面我们已经讲解了什么是模拟算法,这篇主要是讲解在leetcode上遇到的一些模拟题目~ 38. 外观数列 算法分析 这道题其实就是要将连续且相同的字符替换成字符重复的次数+

Spring Roo 实站( 一 )部署安装 第一个示例程序

转自:http://blog.csdn.net/jun55xiu/article/details/9380213 一:安装 注:可以参与官网spring-roo: static.springsource.org/spring-roo/reference/html/intro.html#intro-exploring-sampleROO_OPTS http://stati