5.4.2_利用图块复制技术来处理动画背景
2024-04-21 23:36:28
5.4.2_利用图块复制技术来处理动画背景
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>利用图块复制技术来处理动画背景</title><style>body{background: #ddd;}#canvas{background: #fff;cursor: pointer;margin-left: 10px;margin-top: 10px;-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);box-shadow: 3px 3px 6px rgba(0,0,0,0.5);}#controls{margin-top: 10px;margin-left: 15px;}</style></head><body><div id="controls"><input id="animateButton" type="button" value="Animate" /></div><canvas id="canvas" width="750" height="500"></canvas></body><script>var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');//离屏canvasvar offscreenCanvas = document.createElement('canvas');var offscreenContext = offscreenCanvas.getContext('2d');var paused = true; var discs = [ //三个圆的各种属性{x:150,y:250,lastX:150,lastY:250,velocityX:-3.2,velocityY:3.5,radius:25,innerColor:'rgba(255,255,0,1)',middleColor:'rgba(100,145,230,0.7)',outerColor:'rgba(100,145,230,0.5)',strokeStyle:'gray'},{x:50,y:150,lastX:50,lastY:150,velocityX:2.2,velocityY:2.5,radius:25,innerColor:'rgba(100,145,230,1)',middleColor:'rgba(100,145,230,0.7)',outerColor:'rgba(100,145,230,0.5)',strokeStyle:'blue'},{x:150,y:75,lastX:150,lastY:75,velocityX:1.2,velocityY:1.5,radius:25,innerColor:'rgba(255,0,0,1)',middleColor:'rgba(255,0,0,0.7)',outerColor:'rgba(255,0,0,0.5)',strokeStyle:'orange'},];var numDiscs = discs.length;var animateButton = document.getElementById('animateButton');var lastTime = 0;var lastFpsUpdate = 0;var lastFpsUpdateTime = 0;var now;//初始化context.font = '48px Helvetica';offscreenCanvas.width = canvas.width;offscreenCanvas.height = canvas.height;drawBackground(context);drawBackground(offscreenContext);//事件控制animateButton.onclick = function(){paused = paused? false:true; if(paused){ //如果停止动画animateButton.value = 'Animate';}else{ //播放动画window.requestAnimationFrame(animate);animateButton.value = 'Pause';}}//执行每次动画效果function animate(time){if(!paused){update(); //更新此帧的三个圆的各种新属性drawCircles();//开始绘制更新后的圆//执行下一次animatewindow.requestAnimationFrame(animate);}}//更新function update(){var disc;for(var i=0;i<numDiscs;i++){disc = discs[i];if(disc.x+disc.radius+disc.velocityX>context.canvas.width || disc.x-disc.radius+disc.velocityX<0){disc.velocityX = -disc.velocityX;}if(disc.y+disc.radius+disc.velocityY>context.canvas.height || disc.y-disc.radius+disc.velocityY<0){disc.velocityY = -disc.velocityY;}disc.lastX = disc.x;disc.lastY = disc.y;disc.x += disc.velocityX;disc.y += disc.velocityY;}}//绘制更新后的圆function drawCircles(){var disc;var gradient;for(var i=0;i<numDiscs;i++){drawDiscBackground(discs[i]);}for(var i=0;i<numDiscs;i++){disc = discs[i];gradient = context.createRadialGradient(disc.x,disc.y,0,disc.x,disc.y,disc.radius);gradient.addColorStop(0.3,disc.innerColor);gradient.addColorStop(0.5,disc.middleColor);gradient.addColorStop(1.0,disc.outerColor);context.save();context.beginPath();context.arc(disc.x,disc.y,disc.radius,0,Math.PI*2,false);context.fillStyle = gradient;context.strokeStyle = disc.strokeStyle;context.fill();context.stroke();context.restore();}}//绘制上次背景function drawDiscBackground(disc){var x = disc.lastX;var y = disc.lastY;var r = disc.radius;var w = (r+2)*2;var h = (r+2)*2;context.save();context.beginPath();context.arc(x,y,r+2,0,Math.PI*2,false);context.clip();eraseBackground();context.drawImage(offscreenCanvas,x-(r+2),y-(r+2),w,h,x-(r+2),y-(r+2),w,h);context.restore();}//擦除背景function eraseBackground(){context.clearRect(0,0,canvas.width,canvas.height);}//绘制横隔背景function drawBackground(context){context.save();context.shadowColor = undefined;context.shadowOffsetX = 0;context.shadowOffsetY = 0;context.shadowBlur = 0;var step_y = 12;var left_margin = step_y*4;var top_margin = step_y*3;var i = canvas.height;context.strokeStyle = 'lightblue';context.lineWidth = 1; //这里设置成0.5是会有问题while(i>top_margin){context.beginPath();context.moveTo(0,i);context.lineTo(canvas.width,i);context.stroke();i-=step_y;}context.restore();}</script>
</html>
5.4.2_利用图块复制技术来处理动画背景相关推荐
- vb外部调用autocad_AutoCAD教程之图块的各种相关操作和概念
制图过程中,有时常需要插入某些特殊符号供图形中使用,此时就需要运用到图块及图块属性功能.利用图块与属性功能绘图,可以有效地提高作图效率与绘图质量.也是绘制复杂图形的重要组成部分. 一.图块的特点 图块 ...
- CAD制图初学入门：CAD图块功能的使用技巧
在使用国产CAD制图软件绘制图纸的过程中,经常会用到CAD图块功能.那么作为一名CAD制图初学入门者你知道如何使用浩辰CAD建筑软件中的CAD图块功能吗?不知道也没关系,接下来就让小编来给大家分享一下 ...
- Windows phone 8 学习笔记(5) 图块与通知
基于metro风格的Windows phone 8 应用提到了图块的概念,它就是指启动菜单中的快速启动图标.一般一个应用必须有一个默认图块,还可以有若干个次要图块.另外,通知与图块的关系比较密切,我们 ...
- （Tiled官方文档翻译）第五节：图块集的编辑
编辑一个tileset(图块集)需要将图块集显式地打开.内部的图块集可以通过文件菜单来打开,但是通常是通过点击图块集窗口下方的"编辑图块集"小按钮来快速打开编辑图块集. 5.1 两 ...
- 微软熊辰炎：如何利用图神经网络解决半结构化数据问题？
对于许多信息检索和知识图谱研究者来说,究竟应该使用抽象的结构化信息进行表示学习还是使用海量的文本信息始终是一个富有争议的话题.在本届智源大会上,来自微软研究院的高级研究员熊辰炎博士带来了题为" ...
- cad批量选择相同块_CAD如何批量重命名图块或样式
当面对一大堆的图纸和数据的时候,大家都希望有一个功能或工具能一次性将他们都处理完,因此大家非常喜欢批量工具.群里经常有人讨论批量打印工具. 有时候我们从其他软件,比如UG输出的DWG图纸中,会将一些图 ...
- 5、Power View—图块与切片器的应用
之前我们介绍了"表"."矩阵"."卡"的展现形式,今天继续介绍一种新的数据展现形式,比如我们需要将数据分类显示,这个时候就引入了" ...
- RPG Maker MV 图块冲突解决、素材管理
目录 图块冲突 素材管理 图块冲突 同一个层中,比如都是A层的图块会如上图有冲突,利用这种冲突的图块绘制河上的桥时,会将河流阻隔掉. 有两种方式,第一种是在绘制时按住shift键,第二种是利用不冲突的 ...
- 【工作需要】CAD+VBA 实现图块的旋转平移缩放和拼接
CAD+VBA 实现图块的旋转平移缩放和拼接 前言 一.需求 二.实现步骤 1.识别文件中的正确的坐标信息 2.选择图块上的角点,计算正确坐标信息与正确角点坐标之间的平移旋转参数,并进行平移旋转,加入 ...
最新文章
- linux撤销编辑内容,linux编辑利器vim常用操作
- linux搜索日志组合条件,find查找
- 微星主板超频_内存超频能力依旧拔群！微星MEG Z490 ACE主板评测
- 内部排序的方法实验报告_python 十大经典排序算法
- 继承AppCompatActivity的Activity无法隐藏标题栏
- smartgit 安装
- JavaScript and CSS
- java excel转dbf
- oracle timesten tt的启动与停止
- linux如何查询内存型号,查看linux 查看内存型号
- NexT主题配置优化-出土指南
- RuntimeError: latex was not able to process the following string: b‘lp‘
- word怎么删除某一页的页眉
- 2512 4.7K 5%贴片电阻识别方法
- JAVA常用数据结构
- 斜线/、反斜线\、双斜线//、双反斜线\\
- intel（R）wireless-ac 9462感叹号，WLAN消失，电脑连不上网解决办法
- PPT批量删除相同位置图片（非母版）的野路子
- 通过API接口快速根据关键词获取拼多多商品列表
- warning no match for this type name:xxx.xxx.xxx [Xlint:invalidAbsoluteTypeName]