html5
深入浅出H5
カさま
保持独立思考,不卑不亢不怂
展开
-
html5 合成详解
这篇文章主要说明一下html5中 合成 的使用方法先把公有部分的代码放出来,规定之后的代码块默认之前都有的代码<!--html--><canvas width='500' height='500'></canvas>// javaScriptconst oC = document.querySelector('canvas')const c...原创 2019-05-30 20:02:37 · 335 阅读 · 0 评论 -
canvas应用----刮刮乐
最近在学习html5,为了更好地学习和帮助其他人我决定把我写过的案例写下来~~先说一下刮刮乐这个程序实现的注意点材料:一张图片和canvas画布在html页面只要放图片元素,canvas由js生成。 这是为了保证canvas生成在img上面而且保证刚打开页面的时候不会看见图片生成的canvas涂层要保证大小和位置和图片的相同CSS*{padding:0;margin:0;}bod...原创 2019-05-28 22:06:18 · 185 阅读 · 0 评论 -
canvas特效案例-----字母喷泉
今天介绍一下如何用canvas实现字母喷泉效果首先看一下效果图分析发射源始终位于屏幕中下方不断执行粒子会运动,同时粒子束越到后面越亮粒子数量有最大限制功能实现设置自适应大小函数,窗口大小发生变化时发射源会改变位置(始终位于屏幕的中下方)设置循环调用函数(请求动画帧)运动函数改变粒子位移的同时改变粒子样式每次循环清除多余粒子以上的总结虽然...原创 2019-06-01 15:38:51 · 547 阅读 · 0 评论 -
canvas案例———太阳系
本文将结合面向对象和canvas来模拟太阳系当然有许多参数不太准确,不过重点是如何使用面向对象和canvas实现效果 侧重点要放在重点上不是很懂面向对象的小伙伴要先看一下相关的文章,面向对象的编程思想需要用到原型链,因此原型链也要复习一下先分析一下轨道的话用一个循环能画出来了,详情看代码每个星球都有自己的坐标(x,y)、半径(r)、周期(cycle)、颜色我们将以上...原创 2019-06-02 14:41:16 · 894 阅读 · 0 评论