介绍

就目前移动端而言，已有比较成熟都响应式框架，类似于Bootstrap、AmazeUI、Skeljs。但是对于普通开发者来说，为了满足快速开发的需求去学习和使用这些框架的时间成本是比较高的。所以，本着轻量、快速开发的原则，为大家提供了基于原生JS的移动动端解决方案，希望能在交流、使用中继续优化AutoStrap。

最近电脑系统换为ubuntu后，发现原来这个问题的解决办法和windows中略有不同，及时记录下来。

以前一直在用sublime text2, 有一款插件感觉非常好用，就是LiveReload，
在sublime中写完代码，按下ctrl+s保存后，浏览器自动刷新页面，可直接查看效果，
而不用切换到浏览器中再按F5刷新。这对于做web开发的真心方便，最爽的莫过于双屏开发，这边写完代码，保存，那边直接查看效果。
然而，前段时间开始尝试sublime text 3, 没想到通过package control安装的livereload插件无法使用了，简直不能忍啊！！在网上搜索了好久，也看了国外的一些解答，总算找到了解决方法。

自从投身于互联网学习的怀抱中后，一直想搭建一个属于自己的个人博客。了解过WordPress
，不过因为不懂服务器的知识只得暂时作罢;也看过csdn、博客园等，方便是方便，不过主题样式无法个人定制，这对于美工出身的我简直无法忍受。听朋友说起hexo，并且能够部署在github上，甚是方便，照着教程，一步一步搭建了这个博客。在搭建博客过程中遇到了很多问题，写下这篇教程的原因就是希望能够给需要的人些许帮助。

在HTML5中，我们可以使用drawImage方法在canvas上进行画图操作，其基本代码如下：

1
2
3
4
5

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "images/01.jpg";
context.drawImage(image, 0, 0);  

不过我们会发现这样写是无法显示出图片的，因为图片并没有加载完全，我们就调用了drawImage方法，我们可以使用img的onload方法，使图片加载完全后
在执行drawImage操作，代码如下

1
2
3
4
5

var image = new Image();
image.src = "images/01.jpg";
image.onload = function() {
    context.drawImage(image, 0, 0);
}

或者使用<img>标签先加载图片
<img src="images/01.jpg" style="display: none" id="image">
然后使用getElementById来获得图片对象
var image = document.getElementById('image');