- 博客(21)
- 收藏
- 关注
RSS订阅原创 canvas--动画日，月，地实时运转案例
模拟日月地运转案例本案例将运用canvas动画技术来实现模拟日，月，地星球公转的案例首先声明三个图片对象案例思路init（）函数中：这个函数是启动函数他用来启动和设置一些变量1.给三个图片对象赋值2.调用动画函数让其执行draw（）函数中的内容draw()函数中：此函数主要进行画布的绘制1.定义覆盖原则目的是为了让月球运行到地球阴影部分时可以在阴影后面绘制2.设置填充颜色为的是一会儿绘制地球的阴影部分，设置轮廓颜色为的是一会儿绘制地球的轨道3.将当前状态保存到盏中（想象你玩游戏时候的
2020-09-23 16:05:58
1072
1
原创 canvas笔记--关于基础动画
基本的动画动画的基本步骤canvas的基本动画需要三部1.清空canvas除非接下来的绘制会全部填满canvas否则需要清空所有。最简单的是用clearRect方法2.保存canvas状态如果你需要改变一些会改变canvas状态的设置（样式，变形之类的）又要在每画一帧之时都是原始状态的话，你需要先保存一下3.绘制动画图形（animated shapes） 这一步才是重绘动画帧。4.恢复canvas状态如果已经保存了canvas的状态，可以先恢复它，然后重绘下一帧操控动画Control
2020-09-23 14:57:04
227
原创 canvas笔记--覆盖原则
覆盖原则globalCompositeOperation可以有遮盖指定区域，清除画布中的某些部分globalCompositeOperation = type这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。例子：<!DOCTYPE html><html><head> <meta charset="utf-8" /></head><body onload="draw();"&g
2020-09-23 14:55:35
1169
原创 canvas笔记--关于变形等一系列
变形 移动 旋转 和缩放移动Translating它用来移动 cnvas 和它的原点到一个不同的位置。translate(x, y)translate方法接受两个参数。x 是左右偏移量，y 是上下偏移量，在做变形之前先保存状态translate的例子<!DOCTYPE html><html><head> <meta charset="utf-8" /></head><body onload="draw()
2020-09-23 14:54:00
157
原创 canvas笔记--恢复与保存部分 放入盏中？
状态的保存和恢复 Saving and restoring statesave()保存画布(canvas)的所有状态restore()save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存save和restore的应用例子在这里每当遇到save时就相当于吧当前的状态放到盏中遇到restore是相当于从盏中拿出来一个
2020-09-23 14:51:08
110
原创 canvas笔记--与图像绘制相关部分
绘制文本canvas提供两种方法来渲染文本fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth\])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.绘制填充文本方法实例<!DOCTYPE html><html><head> <meta charset="utf-8" />
2020-09-23 14:49:28
109
原创 canvas笔记--绘制文本
绘制文本canvas提供两种方法来渲染文本fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth\])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.绘制填充文本方法实例<!DOCTYPE html><html><head> <meta charset="utf-8" />
2020-09-23 14:44:20
286
原创 canvas笔记--填充规则
Canvas填充规则当我们用到 fill（或者 [clip]和[isPointinPath] ）你可以选择一个填充规则，可以根据某处路径的外面或者里面来决定该处是否被填充着对于自建与自己路径相交或者路径被嵌套的时候是有用的如果只是几个点圈起来的一个区域那么这两种规则没有区别但是当发生线的焦点时就会呈现差异两个值："nonzero": non-zero winding rule, 默认值.onzero规则”顾名思意就是“非零规则”，用通俗的话讲，就算计算某些东西是不是0，如果不是0则内部，填充
2020-09-23 14:43:08
555
原创 canvas笔记--色彩篇
色彩fillStyle和strokeStylefillStyle=color设置填充形状时使用的样式strokeStyle=color设置形状轮廓时填充的样式color与css中的color一样**注意：**这两个颜色设置一次后其后面的颜色默认是设置的颜色除非重新更改ctx.fillStyle = 'orange';ctx.fillStyle = '#FFA500';ctx.fillStyle = 'rgb(255, 165, 0)';ctx.fillStyle = 'rgba(255
2020-09-23 14:36:22
154
原创 canvas笔记--Path2D篇
Path2D对象Path2()Path2()可使用最新版本的浏览器中的对象来缓存或记录这些绘图命令。您可以快速播放路径。Path2D()构建函数返回一个新实例化的Path2D对象任意的与另一条路径作为参数（创建一个副本）或任选的用有一串svg路径数据new Path2D(); //空路径对象new Path2D(path); // 从另一个Path2D对象复制new Path2D(d); // SVG路径数据中的路径实例演示：创建一个矩形和一个圆两者存储为path2D对象，以
2020-09-23 14:35:18
2943
原创 html画布入门笔记
canvas<canvas>元素<canvas id="tutorial" width="150" height="150"></canvas><canvas>元素只有两个属性，width和height。这些都是可选的，也可以使用DOM 属性设置。如果未指定no width和height属性，则画布最初将为300像素宽和150像素高。可以通过CSS任意调整元素的大小渲染上下文素创建一个固定大小的绘图表面暴露一个或多个渲染上下文，其被用于创建和操纵所
2020-09-17 16:11:14
400
2
原创 模仿搜索框搜索提示案例笔记分享
搜索提示框效果本案例是一个类似百度搜索时输入内容后在搜索框下按照搜索内容显示出相关搜索提示的效果 需要用到的技术是ajax和jQuery大概效果如下第一步：搭建基本HTML主要由一个文本框和一个提示框组成文本框为input标签提示框为ur包含lu标签基本效果如下**注意 ：**后边需要先把提示框隐藏[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQco1ZRw-1599546231604)(https://s1.ax1x.com/2020/09/08/wM
2020-09-08 14:27:30
248
1
原创 轻松学习Ajax入门笔记
Ajax同步交互是什么所谓同步交互就是指发一个请求需要等待返回 然后才能发送下一个请求。同步交互相当于排队 ，排到下一个的情况会因为前一个而有所不同[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dmNsUp4t-1599391735670)(https://s1.ax1x.com/2020/09/02/wSTTje.png)]异步交互是什么所谓异步交互就是指发送一个请求不需要等待返回随时可以在发送下一个请求异步交互的优势用户操作无需像同步交互必须等待结果
2020-09-06 19:33:33
146
原创 http笔记——http原理与实践
http原理与实践经典五层模型[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TDA4uy8K-1599015803403)(https://s1.ax1x.com/2020/08/26/dfleds.png)]低三层物理层主要作用是定义物理设备如何传输数据电脑的网卡端口硬件设备数据链路层在通讯的实体之间建立数据的链路连接网络层为数据在节点之间传输创建逻辑链路传输层向用户提供可靠的端到端服务传输层向更高层屏蔽了下层数据通讯的细节应用层为应用
2020-09-02 11:04:07
156
原创 http笔记缓存机制
HTTP的缓存机制缓存是什么就是将资源的副本保存到用户的客户端电脑上，等到下一次在使用的时候就不需要再访问服务器了而是访问本地的资源目的是减少带宽压力缓存的资源是有生命周期的缓存的优势缓解服务器的资源消耗和隐形压力，提升服务器端大的整体性能减少服务器端资源加载的延迟，进而减少显示某个资源所用的时间减少对带宽的压力，避免网络堵塞问题web站点变的更具有响应性缓存的应用常见的HTTP缓存只能存储get响应，无法缓存其他的响应检索请求的成功响应：响应状态码为200，表示为成功
2020-09-02 11:01:39
243
原创 http第二篇博客
起始行三个元素1.请求方法：(如get获取资源，post推送资源)2.请求地址：通常是一个url 或者协议端口域名的绝对路径3.http版本：应以了剩余报文的结构请求方法记住三句面试题最常用的请求方法是get 和 post常见的请求方法至少有七种请求方法不止七种最后两种不常用请求头请求头允许客户端向服务器端传递附加信息 ，请求头由名称（不区分大小写）后跟一个“：”，冒号后跟具体值（不带换行符）组成根据不同上下文，可分为：1.通用头 ：同时适用于请求和相应消息，
2020-08-24 23:04:55
136
原创 HTTP学习第一天
httphttp报文是什么是服务器和客户端之间交换数据的方式有以下两种请求，由客户端返送用来触发服务器说上的动作响应，来自服务器的应答http请求报文请求报文的组成：http的method，表示请求方法get/post要获取的资源的路径，请求的地址http协议版本号两个目前应用最多的版本号1.1版本2.0版本为服务端表达其他信息的可选头部headers以及对于一行像POST这样的方法http响应报文响应报文的组成http协议版
2020-08-16 20:59:30
89
原创 node.js笔记第一天
nodejs笔记web服务器和服务端js的区别1.js都是运行在浏览器的ECMAScript：js语法bom：浏览器对象模型，用js去操作浏览器窗口Dom：文档对象模型，用js去操作dom树2.nodejs 让js在服务器运行ECMAscript3.在node.js中不能写dom树和bom语法//正常不会报错let关键字/**** var 声明变量* a 有变量提升* b没有块级作用域，是函数作用域* c可以重复声明* d可以重新赋值*** let声明变量**
2020-07-06 00:16:53
114
1
原创 jQuery笔记第二天
其他静态方法isWindow()； 作用：判断传入的对象是不是window对象 返回值：true/falseisArray() 作用：判断传入的对象是不是真数组 返回值：true/falseisFunction(); 作用：判断传入的对象是不是函数 返回值：true/falsejQuery本质上是一个立即执行函数$.
2020-06-30 11:09:51
101
1
原创 初识jQuery01
初识jQuery什么是jQuery？ 他是js库，他可以简化原生js的操作关于版本1x支持ie678，文件稍大2x不支持ie6783x不支持ie678目前大公司用的是1x未压缩版本：有空格换行完整版本有利于阅读，开发阶段使用压缩版本：单词不完整没空格换行不利于阅读，上线阶段使用引入jQuery库下载好之后在中引入jQuery的入口函数原生js和jQuery入口函数的加载模式不同原生js会等到DOM袁术加载完毕，并且图片也加载完毕才会执行jQuery会等到DOM元素加载
2020-06-21 18:09:09
89
原创 HTML学习
html概述html是超文本标记语言，HTML 是由一系列的**元素**组成html结构 HTML基本结构 这是最基本的HTML结构什么是超文本修改文件名为html结尾就是超文本什么是标记语言**标记语言**中的**标记**指的就是 HTML 中的元素（Element），而 HTML 就是由这样的一系列元素组成的，所以被称为**标记语言**。 HTML模板1. <!DOCTYPE> 声明告知浏览器当前 HTML 页面的版本。2. HTML 基本结构
2020-06-15 08:20:29
108
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人