关于canvas

本人也是刚自学了一点canvas，由于js技术也烂得不行，但是还是写了个demo，提供给canvas初学者。

1.canvas是html5的新标签，与img类似， 默认只有两个属性， width， height，可以直接写在canvas标签内， eg：<canvas id=”canvas” width=”300px” height=”300px”></canvas>

（注意）canvas默认宽度为300px，高度默认为150px;

2.canvas只是一个标签， 实际控制操作 还需要用到js，如果对js不是很熟悉也不是很重要， 因为canvas内置属性，方法已经够绘制基本图形了。

3.绘制图形，我们第一步需要获怎么看股票走势图取到canvas这个标签，

　　eg： var canvas = document.getelementbyid(“canvas”);

4.获取到这个标签之后，我们需要添加绘制图形的类型：

　　eg: var ctx = canvas.getcontext(“2d”);

5.现在可以绘制基本的图形了， 比如 绘制一个矩形：

　　eg: ctx.fillrect(100,100,100,100) // 四个参数分别代表：离canvas左边的距离坐标， 离canvas顶部的党的发展历史距离左边，绘制矩形的宽度 ，绘制矩形的高度。（在离canvas左边100距离，上边100距离绘制一个宽高100的矩形）；

6.canvas中提供了一个 begin脑筋急转弯冷笑话path()、有志不在年高下一句clopath();分别表示 开始一个绘制范围，结束一个绘制范围，你可以在这个范围内绘制想要的图案；

　　eg: ctx.beginpath();

　　　　ctx.fillstyle = “red”; // 给填充图形加上颜转动 林俊杰色，默认为黑色；

　　　　ctx.fillrect(100,100,100,100);

　　　　ctx.strokestyle = “red”; //给定绘制路径的颜色；

　　　　ctx.moveto( 200,200); // 给定一个起点；
　　　　ctx.lineto(300,300);　 // 给定另一个点，因为我们知道线段是两个点确定的，

　　　　ctx.stroke(); //stroke把起点和中点链接起来， 当然我们也可以设置多个lineto 连接更多的点；

　　　　ctx.clopath();

感觉实在编不下去了， 第一次写博客，如有朋友喜欢，我定会继续完善。

未完。。。。。