H5-12.16canvas高级应用及插件导入

作者: 冬天不爱洗头 | 来源:发表于2016-12-18 10:17 被阅读0次

一、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也要等到图片加载完毕后执行