![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 78
会点儿前端的大彬哥
10以上年编程经验,曾主持并参与多多个公司大型项目的开发,曾在某教育机构主导前端课程研发工作,输送大批学生进入国内一线互联网公司。目前为面包理想学院创始人。
展开
-
canvas系列教程01-编辑器和helloword
话说年底了,今年承诺了一些js教程还没来得及写,说到了就得办到,年底了,陆续把欠的账换上,首先写一个canvas系列教程,一来是问的人多,二来是简单。总结起来就一句话,我要认真的浪一把。**第一个问题先解决为啥学canvas,而不用flash.**因为flash不好用。(这样是不是一句话把天聊死了?)好吧,详细解释下,第一是因为flash不好用,第二原创 2017-12-21 17:51:26 · 290 阅读 · 0 评论 -
canvas系列教程02-直线和曲线
上一篇文章我们搭建了基础环境,然后画了个矩形玩了玩,至于如何画矩形线框之类的,这些看看手册就行了,没啥复杂的,参数搞对单词别拼错就OK.这篇文章说下常见的坑和我们常用资料又比那些基础的线框实用些的曲线。啥也不说,先上一梭子代码。``` Document canvas{ width:800p原创 2017-12-21 17:52:25 · 297 阅读 · 0 评论 -
canvas系列教程03-柱状图项目1
弄了一堆线方块和函数,感觉挺玄乎,然并卵。我们直接写个项目看看。canvas一个比较拽的应用就是图表和游戏,我们从浅入深,先玩图表,图表我们今天说一个最简单柱状图。![柱状图.png](http://upload-images.jianshu.io/upload_images/745192-5d0d2063b8b23aa3.png?imageMogr2/auto-orient/st原创 2017-12-21 17:53:50 · 192 阅读 · 0 评论 -
canvas系列教程04-柱状图项目2
我们提前做些准备工作,比如画图前先把坐标边距做出来,还有各种字体大小算出来。这里需要一点面向对象的知识,```'use strict';//模仿 http://echarts.baidu.com/demo.html#bar-gradientwindow.onload = function(){ var data = [ {"label":原创 2017-12-21 17:54:38 · 194 阅读 · 0 评论 -
canvas系列教程05-柱状图项目3
书接上文,我们提前做些准备工作,比如画图前先把坐标边距做出来,还有各种字体大小算出来。这里需要一点面向对象的知识,```'use strict';//模仿 http://echarts.baidu.com/demo.html#bar-gradientwindow.onload = function(){ var data = [ {"la原创 2017-12-21 17:55:24 · 174 阅读 · 0 评论 -
canvas系列教程06-柱状图项目4
上一篇文章我已经说过数据准备好画图就非常简单了,如果你担心不回话好办,我给你个最简单的小例子,你先练练。![画图.png](http://upload-images.jianshu.io/upload_images/745192-27d69688f9b7fddd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)原创 2017-12-21 17:56:21 · 285 阅读 · 0 评论 -
canvas系列教程07-canvas动画基础1
上面我们玩了一个图表,大家学好结构,然后在那个基础上去扩展各种图表,慢慢就可以形成自己的图表库了。也可以多看看一些国外的图表库简单的版本,分析分析,读代码对提高用处很大。我说了canvas两大主流用途,一个是图表,一个是游戏,在写游戏项目之前,我们先来点基础,关于动画,没有动画基础讲canvas游戏,就跟你妈让你明年五一结婚而不管你现在有没有女朋友一样不符合逻辑(本人深度受害者)。运动原创 2017-12-21 17:57:12 · 213 阅读 · 0 评论 -
canvas系列教程08-canvas各种坑
写了canvas系列教程的图表库部分和基础教程,收到了很多人的留言,针对大家问题的问题集中做一次填坑。首先是编辑器,之前用了用atom,这几天写了一个canvas图表库,全程使用atom,说下感受。webstorm 就相当于你妈,你想要的不想要的都给你,但是显得有点唠唠叨叨(功能太全,好多用不上,打开慢),而atom就相当于你的儿子,一张白纸,只要你调理的好,太原创 2017-12-21 17:58:07 · 238 阅读 · 0 评论 -
ES6入门,看这篇就够了
## ES6从入门到放弃1.ES6是什么,黑历史,不讲,自己百度去。2.在浏览器中如何使用? 1.babel babeljs.io在线编译 2.traceur-----Google出的编译器,把ES6编译成ES5 traceur 编译 bootsrap 引导程序,和我们理解的bootstrap css那个框架没有半原创 2017-12-21 17:45:06 · 2814 阅读 · 2 评论