-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
132 lines (63 loc) · 27.3 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>canvas制作行走的小人</title>
<link href="/2019/10/03/canvas-zhi-zuo-xing-zou-de-xiao-ren/"/>
<url>/2019/10/03/canvas-zhi-zuo-xing-zou-de-xiao-ren/</url>
<content type="html"><![CDATA[<h3 id="制作步骤"><a href="#制作步骤" class="headerlink" title="制作步骤"></a>制作步骤</h3><ol><li>初始化数据</li><li>加载图片方法</li><li>在加载图片方法的回调函数中写加载图片的具体方法，需要对键盘判断</li><li>绘制图片方法</li></ol><h3 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h3><p><img src="/2019/10/03/canvas-zhi-zuo-xing-zou-de-xiao-ren/1.png" alt=""></p><p><img src="/2019/10/03/canvas-zhi-zuo-xing-zou-de-xiao-ren/2.png" alt=""></p><p><img src="/2019/10/03/canvas-zhi-zuo-xing-zou-de-xiao-ren/3.png" alt=""></p><p><img src="/2019/10/03/canvas-zhi-zuo-xing-zou-de-xiao-ren/4.png" alt=""></p><h3 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h3><pre><code class="js">var Person = function (ctx) { this.ctx = ctx || document.querySelector('canvas').getContext('2d'); this.src = 'image/04.png' //使用图片4*4 this.canvasWidth = this.ctx.canvas.width this.canvasHeight = this.ctx.canvas.height this.stepSize = 10 //步伐大小 this.direction = 0 //起始方向 this.stepX = 0 //横向偏移的步数 this.stepY = 0 //纵向偏移的步数 //初始化数据 this.init() } Person.prototype.init = function () { var that = this //加载图片 this.loadImage(function (image){ that.imageWidth = image.width //获取图片宽、高 that.imageHeight = image.height that.personWidth = that.imageWidth / 4 //获取人物宽高 that.personHeight = that.imageHeight / 4 that.x0 = that.canvasWidth / 2 - that.personWidth / 2 //获取圆心 that.y0 = that.canvasHeight /2 - that.personHeight / 2 //默认绘制 that.ctx.drawImage(image, 0,0, that.personWidth,that.personHeight, that.x0,that.y0, that.personWidth,that.personHeight) //通过键盘控制行走方向 that.index = 0 document.onkeydown = function (e) { if(e.keyCode == 40){ //下/前 that.direction = 0 that.stepY++; that.drawImage(image) }else if (e.keyCode == 37) { //左 that.direction = 1 that.stepX--; that.drawImage(image) }else if (e.keyCode == 39) { //右 that.direction = 2 that.stepX++; that.drawImage(image) }else if (e.keyCode == 38) { //上/后 that.direction = 3 that.stepY--; that.drawImage(image) } } }) } //加载图片方法 Person.prototype.loadImage = function (callback) { var image = new Image() image.onload = function () { callback && callback(image) } image.src = this.src } //绘制图片方法 Person.prototype.drawImage = function (image) { this.index++; //清除画布 this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight) //绘图 this.ctx.drawImage(image, //定位图像的起始位置 this.index *this.personWidth,this.direction *this.personHeight, this.personWidth,this.personHeight, //截取的宽度和高度 this.x0 + this.stepX *this.stepSize , this.y0 + this.stepY *this.stepSize, this.personWidth,this.personHeight); if(this.index >= 3){ this.index = 0 } }new Person();</code></pre><h4 id="image素材"><a href="#image素材" class="headerlink" title="image素材"></a>image素材</h4><p><img src="/2019/10/03/canvas-zhi-zuo-xing-zou-de-xiao-ren/a.png" alt=""></p><script> document.querySelectorAll('.github-emoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); }); </script>]]></content>
<categories>
<category> canvas </category>
</categories>
<tags>
<tag> canvas </tag>
</tags>
</entry>
<entry>
<title>canvas饼状图+解释文本</title>
<link href="/2019/10/03/canvas-bing-zhuang-tu-ji-qi-xiang-xi-shuo-ming/"/>
<url>/2019/10/03/canvas-bing-zhuang-tu-ji-qi-xiang-xi-shuo-ming/</url>
<content type="html"><![CDATA[<h1 id="canvas饼状图-解释文本"><a href="#canvas饼状图-解释文本" class="headerlink" title="canvas饼状图+解释文本"></a>canvas饼状图+解释文本</h1><h2 id="制作canvas饼状图步骤"><a href="#制作canvas饼状图步骤" class="headerlink" title="制作canvas饼状图步骤"></a>制作canvas饼状图步骤</h2><ol><li>绘制饼状图</li><li>绘制注释线及其解释文</li><li>绘制小矩形进行数据说明</li></ol><h2 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h2><p><img src="/2019/10/03/canvas-bing-zhuang-tu-ji-qi-xiang-xi-shuo-ming/1.png" alt=""></p><h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><pre><code class="js"> var PieChart = function (ctx) { this.ctx = ctx || document.querySelector('canvas').getContext('2d'); this.w = this.ctx.canvas.width //获取canvas宽度 this.h = this.ctx.canvas.height //获取canvas高度 this.x0 = this.w/2 + 60 //获取原点x this.y0 = this.h/2 //获取原点y this.radius = 150 //获取半径 this.outLine = 20 //圆盘外面的线长度 this.rectW = 30 //小矩形的宽度 this.rectH = 16 //小矩形的高度 this.space = 20 //小矩形距离边框 } //传入数据 PieChart.prototype.init = function(data) { this.drawPie(data) } //画饼状图 PieChart.prototype.drawPie = function (data) { var that = this var angleList = this.transformAngle(data) //数组 var startAngle = 0 angleList.forEach(function (item,i){ var endAngle = startAngle + item.angle that.ctx.beginPath() that.ctx.moveTo(that.x0, that.y0) that.ctx.arc(that.x0, that.y0, that.radius, startAngle, endAngle); var color = that.ctx.fillStyle = that.getRandomColor() that.ctx.stroke() that.ctx.fill(); that.drawTitle(startAngle, item.angle, color, item.title) that.drawDesc(i,item.title) startAngle = endAngle }) } //画注释线及其解释 PieChart.prototype.drawTitle = function (startAngle,angle,color,title) { var edge = this.radius + this.outLine var edgeX = Math.cos(startAngle + angle / 2) * edge var edgeY = Math.sin(startAngle + angle / 2) * edge var outX = this.x0 + edgeX var outY = this.y0 + edgeY this.ctx.beginPath() this.ctx.moveTo(this.x0 ,this.y0); this.ctx.lineTo(outX,outY); this.ctx.strokeStyle = color; this.ctx.font = '14px Microsoft YaHei'; var textWidth = this.ctx.measureText(title).width if(outX > this.x0){ this.ctx.lineTo(outX + textWidth , outY) this.ctx.textAlign = 'left' }else{ this.ctx.lineTo(outX - textWidth , outY) this.ctx.textAlign = 'right' } this.ctx.stroke(); this.ctx.textBaseline = 'bottom' this.ctx.fillText(title, outX, outY) } //画小矩形说明 PieChart.prototype.drawDesc = function (index,title) { this.ctx.fillRect(this.space,this.space + index * (this.rectH + 10),this.rectW,this.rectH) this.ctx.beginPath() this.ctx.textAlign = 'left' this.ctx.textBaseline = 'top'; this.ctx.font = '12px Microsoft YaHei' this.ctx.fillText(title,this.space + this.rectW + 10 ,this.space + index * (this.rectH + 10)) }; //将数据转换为弧度 PieChart.prototype.transformAngle = function (data) { var total = 0 data.forEach(function(item, i){ total += item.num }) data.forEach(function(item, i){ var angle = item.num / total *Math.PI *2 item.angle = angle }) return data } //生成随机颜色 PieChart.prototype.getRandomColor = function () { var r = Math.floor(Math.random() * 256) var g = Math.floor(Math.random() * 256) var b = Math.floor(Math.random() * 256) return 'rgb(' + r +','+ g + ','+ b +')'; } //数据 var data = [ {title: '15-20岁',num: 6}, {title: '20-25岁',num: 30}, {title: '25-30岁',num: 10}, {title: '30以上',num: 8} ]; var pirChart = new PieChart(); pirChart.init(data)</code></pre><script> document.querySelectorAll('.github-emoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); }); </script>]]></content>
<categories>
<category> canvas </category>
</categories>
<tags>
<tag> canvas </tag>
</tags>
</entry>
<entry>
<title>Vue实例的生命周期</title>
<link href="/2019/08/31/vue-sheng-ming-zhou-qi/"/>
<url>/2019/08/31/vue-sheng-ming-zhou-qi/</url>
<content type="html"><![CDATA[<h1 id="vue实例的生命周期"><a href="#vue实例的生命周期" class="headerlink" title="vue实例的生命周期"></a><a href="https://cn.vuejs.org/v2/guide/instance.html#实例生命周期" target="_blank" rel="noopener">vue实例的生命周期</a></h1><h2 id="生命周期概念"><a href="#生命周期概念" class="headerlink" title="生命周期概念"></a>生命周期概念</h2><p>从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子 = 生命周期函数 = 生命周期事件</p><h2 id="主要的生命周期函数分类"><a href="#主要的生命周期函数分类" class="headerlink" title="主要的生命周期函数分类"></a>主要的生命周期函数分类</h2><h3 id="创建期间的生命周期函数"><a href="#创建期间的生命周期函数" class="headerlink" title="创建期间的生命周期函数"></a>创建期间的生命周期函数</h3><ul><li><strong>beforeCreate</strong>：实例刚在内存中被创建出来，此时，还<strong>没有初始化好 data 和 methods 属性</strong></li><li><strong>created</strong>：实例已经在内存中创建好了，<strong>data 和 methods 都已经被初始化好</strong>，如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作，此时还没有开始 编译模板（即还未涉及el）</li><li><strong>beforeMount</strong>：<strong>内存已经完成了模板的编译，但是还没有挂载到页面中</strong>，即尚未把模板渲染到 页面中，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串，<code>$el</code> 属性目前不可见。（页面的还是旧的）</li><li><strong>mounted</strong>：<strong>已经将编译好的模板，挂载到了页面指定的容器中显示</strong>，要通过某些插件操作页面上DOM节点，最早只能在这里进行</li></ul><h3 id="运行期间的生命周期函数"><a href="#运行期间的生命周期函数" class="headerlink" title="运行期间的生命周期函数"></a>运行期间的生命周期函数</h3><ul><li><strong>beforeUpdate</strong>：状态更新之前执行此函数， 此时 <strong>data 中的状态值是最新的，但是界面上显示的数据还是旧的</strong>，因为此时还没有开始重新渲染DOM节点</li><li><strong>updated</strong>：实例更新完毕之后调用此函数，此时 <strong>data 中的状态值 和 界面上显示的数据，都已经完成了更新</strong>，界面已经被重新渲染好了！</li></ul><h3 id="销毁期间的生命周期函数"><a href="#销毁期间的生命周期函数" class="headerlink" title="销毁期间的生命周期函数"></a>销毁期间的生命周期函数</h3><ul><li><strong>beforeDestroy</strong>：实例销毁之前调用。在这一步，实例仍然完全可用。</li><li><strong>destroyed</strong>：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</li></ul><p><img src="/2019/08/31/vue-sheng-ming-zhou-qi/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%5Clifecycle.png" alt="lifecycle"></p><script> document.querySelectorAll('.github-emoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); }); </script>]]></content>
<categories>
<category> vue </category>
</categories>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>解决npm被墙问题</title>
<link href="/2019/08/29/jie-jue-npm-bei-qiang-wen-ti/"/>
<url>/2019/08/29/jie-jue-npm-bei-qiang-wen-ti/</url>
<content type="html"><![CDATA[<h1 id="解决npm别墙问题"><a href="#解决npm别墙问题" class="headerlink" title="解决npm别墙问题"></a>解决npm别墙问题</h1><p>npm存储包文件的服务器在国外，会被墙，速度慢。</p><p>如果npm的服务器在中国就好了，所以淘宝团队干了这事。</p><p>来自官网：“这是一个完整npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟<br>一次以保证尽量与官方服务同步。”官方网址：<a href="https://npm.taobao.org" target="_blank" rel="noopener">淘宝镜像源</a></p><p>这里提供三种方法</p><h2 id="第一种下载淘宝镜像源"><a href="#第一种下载淘宝镜像源" class="headerlink" title="第一种下载淘宝镜像源"></a>第一种下载淘宝镜像源</h2><p>淘宝cnpm <a href="http://npm.taobao.org/" target="_blank" rel="noopener">淘宝镜像</a> ， 安装淘宝cnpm，global全局下载 ，命令行输入如下， 以后安装包之前把npm转换为cnpm </p><pre><code>npm install --global cnpm</code></pre><h2 id="第二种利用淘宝镜像源链接下载"><a href="#第二种利用淘宝镜像源链接下载" class="headerlink" title="第二种利用淘宝镜像源链接下载"></a>第二种利用淘宝镜像源链接下载</h2><p>如果不想安装<code>cnpm</code>又想使用淘宝服务器的话可以直接执行下面代码下载jQuery（例子）</p><pre><code class="shell">npm install jquery --registry=https://registry.npm.taobao.org</code></pre><h2 id="第三种直接配置文件（最简单）"><a href="#第三种直接配置文件（最简单）" class="headerlink" title="第三种直接配置文件（最简单）"></a>第三种直接配置文件（最简单）</h2><p>执行下面这行代码即可</p><pre><code>npm config set registry http://registry.npm.taobao.org</code></pre><p>查看npm配置信息 <code>npm config list</code> 看registry即可 如下即成功</p><pre><code> registry = "http://registry.npm.taobao.org/"</code></pre><script> document.querySelectorAll('.github-emoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); }); </script>]]></content>
<categories>
<category> npm </category>
</categories>
<tags>
<tag> npm </tag>
</tags>
</entry>
<entry>
<title>hexo+github搭建个人博客（超详细图解）</title>
<link href="/2019/08/28/hexo-github-da-jian-ge-ren-bo-ke-chao-xiang-xi-tu-jie/"/>
<url>/2019/08/28/hexo-github-da-jian-ge-ren-bo-ke-chao-xiang-xi-tu-jie/</url>
<content type="html"><</code></pre><p><img src="/2019/08/28/hexo-github-da-jian-ge-ren-bo-ke-chao-xiang-xi-tu-jie/1566979719335.png" alt=""></p><h2 id="将hexo推送到远端"><a href="#将hexo推送到远端" class="headerlink" title="将hexo推送到远端"></a>将hexo推送到远端</h2><p>正常情况下，再输入<code>hexo d</code>就可以进行了</p><p>但是如果不顺利，遇到下面的情况，也是很好解决的</p><p><img src="/2019/08/28/hexo-github-da-jian-ge-ren-bo-ke-chao-xiang-xi-tu-jie/1566980198147.png" alt=""></p><p>解决方法：</p><p>在下面补充你的个人信息，注册github邮箱和github的昵称</p><pre><code>D:\blog> git config --global user.email "2282995214@qq.com"D:\blog>git config --global user.name "furfur-jiang"</code></pre><p><img src="/2019/08/28/hexo-github-da-jian-ge-ren-bo-ke-chao-xiang-xi-tu-jie/1566980373027.png" alt=""></p><p>然后弹出一个github的登录窗口，输入内容登录即可</p><p><img src="/2019/08/28/hexo-github-da-jian-ge-ren-bo-ke-chao-xiang-xi-tu-jie/1566980134940.png" alt=""></p><p>最后再次 <code>hexo d</code>即可，然后可以打开你的浏览器，输入你的网站就可以</p><p>例如我的hexo <a href="https://furfur-jiang.github.io/">https://furfur-jiang.github.io/</a> 把昵称换了就可以</p><p>预览</p><p><img src="/2019/08/28/hexo-github-da-jian-ge-ren-bo-ke-chao-xiang-xi-tu-jie/1566980553091.png" alt=""></p><p>完成啦啦啦！</p><p>样式的调整等我以后再出啦</p><script> document.querySelectorAll('.github-emoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); }); </script>]]></content>
<categories>
<category> hexo </category>
</categories>
<tags>
<tag> hexo </tag>
</tags>
</entry>
</search>