canvas系列教程01-编辑器和helloword

话说年底了，今年承诺了一些js教程还没来得及写，说到了就得办到，年底了，陆续把欠的账换上，首先写一个canvas系列教程，一来是问的人多，二来是简单。

总结起来就一句话，我要认真的浪一把。

第一个问题先解决为啥学canvas，而不用flash.

因为flash不好用。（这样是不是一句话把天聊死了？）

好吧，详细解释下，第一是因为flash不好用，第二是因为flash把乔老爷子惹毛了，乔帮主一句话，以后苹果产品都不用你flash,苹果在手机端的地位，就跟你爸在你家的的地位似的，他的一句话就相当于你把一句话说以后把你的生活费给眨了，你肯定明白flash的感受，这下就操蛋了。

历史和感情纠葛对你变成没有半毛钱关系，我们都是面向工资编程的开发者，所以不墨迹了。说怎么开发。

古人说的好，要想活儿好，家伙得好使（工欲善其事必先利其器）。我们学canvas你得有些好工具。有人说得有一个好编辑器啊，然后吵得一地鸡毛或者各种纠结什么编辑器好。我告诉大家我我用atom（https://atom.io/）,不是因为它比别的多好，而是写js只要不是太差的编辑器就行，我也不知道我电脑上啥时候装的atom,而且是免费的，为啥不用webstorm 之流的集成开发环境，因为集成了太多的特殊服务，是很爽问题是慢啊！你明明可以免费跟你上铺舍友借个篮球去打，没必要为了借个篮球就请他特殊服务吧。

说完了编辑器还不够，为啥？想想一下我的学生调试了一晚上程序第二天我告诉他你测试的浏览器不支持这个功能的时候他的心情吧……

一般chrome就ok,顺带一句，不是所有的chrome 下html5的功能都支持或者表现一样，拿http://html5test.com/这个网站...，否则你的心情就会跟你和你女朋友本来想甜蜜一晚上结果发现怎么也找不到气球结果小纯洁了一晚上第二天回到家发现原来它就在你口袋里一样的心情，自行脑补……

最后开发之前我们先看看一些NB的canvas做的东西，给我们一nainai坚持下去的动力。

http://www.chartjs.org/sample... 很实用

https://playcanvas.com/ 等你学会了写几个，实属吹牛忽悠，炫耀装13的利器。

不墨迹，开整第一个例子，hello word.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      width:800px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.fillStyle = 'blue';
        gd.fillRect(20,40,50,100);

      };
  </script>

</head>
<body>
    <canvas id="c1" width="300" height="300"></canvas>

</body>
</html>

是不是简单的让人发指？这里注意两点：

第一点，canvas是置换元素或者块元素或者内联元素对你开发影响不大，你如果是大牛了研究这个没问题，你连基础的矩形都画不出来闲的蛋疼研究那个啊？

第二点，atom裸奔很难受，安装一个emet够用就行了，别还没学呢先整一堆没用的各种智能填充插件，你会了熟了用那些没问题，如果你连单词都拼不对就想着投机取巧，你学不好。

正确的方法加上坚持就是捷径。

明天讲讲各种形状和贝塞尔取现等基本的画法就可以写项目了。

不能让学生开发出来项目的教程都是大忽悠和耍流氓。