- 博客(10)
- 收藏
- 关注
原创 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 1091 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 363
原创 H5canvas 4:图像混合
H5canvas 4:图像混合这里要讲的是globalCompositeOperation其属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。源图像 = 您打算放置到画布上的绘图。目标图像 = 您已经放置在画布上的绘图W3school上对于属性值介绍是这样的:我个人的网页中选择了几个试了一下,跟PS里面图片混合模式差不多。Js代码:var can=null;v...
2019-03-08 16:52:15 460
原创 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 1050
原创 H5canvas 2:路径,画七巧板
H5canvas 2:路径,画七巧板我们小时候应该都玩过七巧板,小小几块板可以拼出很多的图形,我挑了个简单的图形拼凑了一只小船:写起来格外简单,代码都是相同的,只是改了几个坐标,主要使用了beginPath(),fillStyle(),closePath() fill()这几个方法以下是js代码(html 和css代码都是一样的,可参考我之前的文章, 或者直接写 <...
2019-03-08 16:19:07 476
原创 H5canvas 1:画圆
H5canvas画圆 今天整理了一下自己的文档,发现之前学的canvas还挺好玩的。首先是canvas画圆:它的html代码和CSS代码很简单<h2>Canvas——画圆</h2><canvas id="myCanvas" width="400" height="300">&am
2019-03-08 16:04:10 1375
原创 用jQuery做页面预加载
用jQuery做页面预加载 在网页加载之前出现如进度条这一类的小动画是一种很好看的特效,使用jQuery可以很方便的做出这种效果。我在这里使用的是$(selector).animate(styles,speed,easing,callback)这个语句其中,1、style就是CSS的样式,比如margin,...
2019-03-06 22:34:30 991
原创 CSS3学习笔记之3d菜单
CSS3学习笔记之3d菜单 在网页上要实现3d动画效果一般都要用到js代码,今天,我学习了用纯CSS3代码实现这个效果(学习了这个动效,感觉自己以前好像没学过CSS一样~)。 先上效果:鼠标划过时的效果上面用到的知识主要是:perspectivetransform...
2019-03-02 15:42:03 254
原创 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 410
原创 Unity学习笔记:Unity 3D 飞机大战
Unity学习笔记:Unity 3D 飞机大战1、打开unity软件后,首先新建Quad作为背景,导入飞机模型,并为其添加刚体然后创建C#脚本,挂载到飞机上。2、给飞机创建子弹,让子弹成为预制体,同样创建C#脚本3、创建陨石和敌机作为敌方,飞机发射子弹使其销毁,如果飞机与敌方相撞,则飞机爆炸消失。放上完成后的图:给飞机设置的组件:子弹的组件:陨石的组件:敌机和其子弹的组件...
2019-03-01 16:50:57 8202 4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人