joke_shi-CSDN博客

原创 H5 canvas基础入门到捕鱼达人小游戏实现(5)drawImage的应用

不知不觉，这已经是第五篇canvas系列文章了，课时我们依然没有讲捕鱼游戏，今天这节我们主要讲canvas是如何处理图片的，这节讲完了，我们就可以正式开始编写捕鱼游戏了。图片处理 drawImage1、context.drawImage(image,x,y) x:绘制图像的x坐标 y:绘制图像的y坐标2、context.drawImage(image,x,y,w,h); x:画在canvas的x

2017-12-30 14:18:19 3101 2

原创 H5 canvas基础入门到捕鱼达人小游戏实现(4)canvas事件处理和图形动作

这已经是第四篇canvas文章了，今天主要讲canvas中图形动作和canvas中的事件图形动作常用动作api：平移，缩放，旋转平移var oC = document.getElementById('c1'); var gd = oC.getContext('2d'); gd.translate(100,100);//x,y平移到的位置 gd.fillRect(0,0,100,100);//绘制一

2017-12-27 16:42:18 1707

原创 H5 canvas基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影

上一篇主要讲解了矩形柱状图，弧形和饼图的绘制，但是离我们的目标还是有点远，不要紧，我们基础api都还没有学习完，今天继续。本节主要内容 - canvas画板制作 - 块的直线运动 - 粒子运动 - 线性渐变 - 径向渐变 - 文字渲染 - 阴影canvas画板canvas画板简单来说就是设置一块画布在上面自由画线，看看效果图 document.addEventListener('D

2017-12-25 10:04:00 1234

原创 H5 canvas基础入门到捕鱼达人小游戏实现(2)-矩形,柱状图,饼图绘制

学习canvas是一个不长不短的过程，但是需要大量的实践，才能深入学习到canvas的精髓，所以看标题应该就知道canvas是一个系列文章，上一篇文章主要讲解了，canvas的如何画直线等一些基础的内容，那么这边文章，我们主要来学习下以下几点：基础： - 矩形 - 圆弧 - 柱状图 - 饼图画矩形var canvas= document.getElementById('canvas');

2017-12-21 13:33:22 937

原创 H5 canvas基础入门到捕鱼达人小游戏实现(1)

为什么学习canvas？看见别人网页一些非常炫酷的效果，羡慕不已，于是对canvas产生了浓厚的兴趣，所以想仔细学习学习canvas.下面就一起来学习吧，本文为系列文章，最后会编写一个简单版的捕鱼达人小游戏作为结课标准。什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。 canva

2017-12-21 08:50:18 5963

原创 vueJs(2.x)+router+vuex简易博客系统<七> 整合vuex

上篇文章我们可以向后台发送请求了，那么如果请求来的数据都在组件内，随着项目不断增大，我们维护起来将会非常困难，还有另外一个问题就是请求来的数据，如果多个组件公用的话，传递起来也是非常困难的一件事情。于是就有了状态统一管理，那么就是今天的主角vuex。 vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。官方的解释可以自行阅读官方文档吧，我这里就用自己的语言把自己理解的

2017-12-01 16:33:15 891

原创 vueJs(2.x)+router+vuex简易博客系统<六> 整合axios

上一篇文章介绍了路由的基础知识，我们已经学会了使用路由跳转链接，当碰到更加复杂的需求的时候，可以查阅下官网api,接下来，我们需要向后台发送请求了，由于vue不自带ajax请求模块，所以我们安装官方推荐的axios的模块 1、安装axiosnpm install axios --save2、打开项目的main.js，添加以下代码//先引入模块 import axios from 'axios'//这

2017-11-28 09:04:13 553

原创 vueJs(2.x)+router+vuex简易博客系统<五>

上一篇文章简单介绍了下vue的基本语法，其实入门还是非常简单，回到项目中，我们把界面已经全部都写好了，在github中可以下载：https://github.com/shiyou00/blog_vue 可以对着项目看看，这章主要结合项目讲解下路由的知识项目中有两个界面： page/home/index.vue 这个是博客首页 page/home/content.vue 这个是博客的内容页我们的

2017-11-24 10:12:46 278

原创 vueJs(2.x)+router+vuex简易博客系统<四>

上一遍我们已经编写好了，所需界面，那么现在我们该做的事情就是接入数据了，在接入数据之前，我们所需要做的事件，就是先熟悉下vue这个渐进式框架的基本语法，下面就一起来练习下吧数据渲染 div id="app"> {{message}} div> var app = new Vue({ el:'#app', data:{ message:'hel

2017-11-23 10:32:30 211

原创 vueJs(2.x)+router+vuex简易博客系统<三>

之前两篇文章已经把vue CLI 介绍的差不多了，并且也做了一些自定义的修改，那么接下来，我们就可以开始coding啦，我们先总结下，我们还欠缺哪些知识点呢？ 1、vue.js的一些基础知识 2、router路由的配置 3、vuex的使用(状态管理工具) 以上3点本篇暂时都不讲，本篇先讲讲，如何编写好一个完整的界面，以及拿到项目的时候，该如何划分好通用模块，做到高复用。分析

2017-11-23 09:57:51 304

原创 vueJs(2.x)+router+vuex简易博客系统<二>

上一遍文章主要是讲解基本的安装和配置，下面我们需要按照实际情况实现我们需要的配置主要实现以下几点： 1. 配置less，习惯用less了。 2. 项目结构重新架构先看看我们要做个什么项目博客首页博客详情页项目属于小项目，但是多练习下也是一个熟悉的过程。项目中SRC文件夹分析入口文件 main.js文件//引入vue import Vue from 'vue'//

2017-11-13 18:22:50 243

原创 vueJs(2.x)+router+vuex简易博客系统<一>

通过写简易博客系统来学习vue全家桶的使用项目基础搭建技术选型前端vue.js(2.x)这里就不介绍它的基础了，可以看下官网的api写的非常清晰易懂 vue-router@2.x 路由，注意: vue-router@2.x 只适用于 Vue 2.x。官网：https://router.vuejs.org/zh-cn/ javaspring+springmvc+mybatis(可以不用关注)

2017-11-13 15:48:44 308

joke_shi的博客