12.16学习经验分享#
Bruce_Zhu于2016.12.16
一、canvas-创建路径绘制线条(直线和折线、多边形)
- 绘制方法
1）设置起点坐标值
moveTo(x,y);
2）设置终点(折点)坐标值
lineTo(x,y);
- 绘制线条的属性
1）设置线条的宽度，默认1px
lineWidth
2）设置线条端点的形状
lineCap
butt - 平角
round - 圆角
square - 正方向
3）设置两条线交点的形状
lineJoin
miter - 尖角
round - 圆角
bevel - 斜角
4）miterLimit - 配合lineJoin使用
lineJoin设置为miter，该属性值设置尖角延伸范围
二、canvas绘制图片
1、 按照图片原大小加载
drawImage(img,x,y)
img - 当前加载的图片
x和y - 图片左上角的位置
注意： 必须要保证图片加载完毕(onload事件)后，再绘制图片
-
平铺图片
var ptn = createPattern(img,type) 返回一个平铺对象，将这个对象作为将要绘制图像的填充颜色
img : 平铺的图片
type: 平铺的方式repeat/no-repeat/repeaet-x/repeat-y
注意：
必须要保证图片加载完毕(onload事件)后，再绘制图片，createPattern也要等到图片加载完毕后执行
三、切割图片
按照创建路径使用
clip()
四、 画布方法
1、 scale(x,y); - 缩放
x - 水平方向上的缩放
y - 初值方向上的缩放
context.scale(sx,sy);
context.fillRect(x,y,width,height);
sx:让x和width相对于画布左上角进行缩放
sy:让y和height相对于画布左上角进行缩放
两次scale在一个会产生叠加效果
2、translate(x,y) - 重新映射画布上的（0,0）位置
context.translate(tx,ty);
tx和ty改变了矩形的x和y的参考点
3、rotate(); 旋转画布
degrees * Math.PI / 180;
4、save() 保存当前画布属性、状态
5、resotre() 恢复画布属性状态
六、Chart.js插件的学习教程
