beiluo77-CSDN博客

原创 H5canvas 6：帧动画

H5canvas 6：帧动画使用canvas实现动画效果是一种很不错的方式，这里要实现的是帧动画。我找了小女孩走路的各个姿势图，使用代码，实现了走路这一效果。下面几个按钮分别是：创建，走路，改变速度，以及停止我这里创建了两个js文件let Girl=function(x,y,w,h,dx,dy,sw,sh){ this.girlImage; this.girlReady=false...

2019-03-08 17:34:06 1103 1

原创 H5canvas 5：转动的进度条

H5canvas 5：转动的进度条进度条可以用css,jQuery实现，同样的，canvas也能实现它以上是我的网页实现。js代码：let can=null;let ctx=null;let parts=9;let secs=0;let rotate=0;let timeHandle=null;window.function(){ const drawBtn=documen...

2019-03-08 17:20:27 374

原创 H5canvas 4：图像混合

H5canvas 4：图像混合这里要讲的是globalCompositeOperation其属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。源图像 = 您打算放置到画布上的绘图。目标图像 = 您已经放置在画布上的绘图W3school上对于属性值介绍是这样的：我个人的网页中选择了几个试了一下，跟PS里面图片混合模式差不多。Js代码：var can=null;v...

2019-03-08 16:52:15 470

原创 H5canvas 3：图像操作（滤镜）

H5canvas 3：图像操作（滤镜）canvas图像操作，这里我主要用了drawImage()这个方法新建一个画布，用不同的按钮实现不同的滤镜效果。html代码：<h2>图像操作</h2> <img src="img/12.jpg" width="100%" id="pic"/> <canvas id="mycan&

2019-03-08 16:36:08 1074

原创 H5canvas 2：路径，画七巧板

H5canvas 2：路径，画七巧板我们小时候应该都玩过七巧板，小小几块板可以拼出很多的图形，我挑了个简单的图形拼凑了一只小船：写起来格外简单，代码都是相同的，只是改了几个坐标，主要使用了beginPath()，fillStyle()，closePath() fill()这几个方法以下是js代码（html 和css代码都是一样的，可参考我之前的文章，或者直接写 <...

2019-03-08 16:19:07 496

原创 H5canvas 1：画圆

H5canvas画圆    今天整理了一下自己的文档，发现之前学的canvas还挺好玩的。首先是canvas画圆：它的html代码和CSS代码很简单<h2>Canvas——画圆</h2><canvas id="myCanvas" width="400" height="300">&am

2019-03-08 16:04:10 1391

原创用jQuery做页面预加载

用jQuery做页面预加载       在网页加载之前出现如进度条这一类的小动画是一种很好看的特效，使用jQuery可以很方便的做出这种效果。我在这里使用的是$(selector).animate(styles,speed,easing,callback)这个语句其中，1、style就是CSS的样式，比如margin，...

2019-03-06 22:34:30 1004

原创 CSS3学习笔记之3d菜单

CSS3学习笔记之3d菜单        在网页上要实现3d动画效果一般都要用到js代码，今天，我学习了用纯CSS3代码实现这个效果（学习了这个动效，感觉自己以前好像没学过CSS一样~）。        先上效果：鼠标划过时的效果上面用到的知识主要是：perspectivetransform...

2019-03-02 15:42:03 263

原创 CSS3学习笔记之loading动效

CSS3学习笔记之loading动效关于web的loading动效，不需要js同样可以实现效果。以下是html代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="

2019-03-02 13:47:11 413

原创 Unity学习笔记：Unity 3D 飞机大战

Unity学习笔记：Unity 3D 飞机大战1、打开unity软件后，首先新建Quad作为背景，导入飞机模型，并为其添加刚体然后创建C#脚本，挂载到飞机上。2、给飞机创建子弹，让子弹成为预制体，同样创建C#脚本3、创建陨石和敌机作为敌方，飞机发射子弹使其销毁，如果飞机与敌方相撞，则飞机爆炸消失。放上完成后的图：给飞机设置的组件：子弹的组件：陨石的组件：敌机和其子弹的组件...

2019-03-01 16:50:57 8418 4

beiluo77的博客