陶吉诃德

这是最好的时代,这是最坏的时代;这是智慧的年代,这是愚蠢的年代;这是信仰的时期,这是怀疑的时期;这是光明的季节,这是黑暗的季节;这是希望之春,这是绝望之冬;

Tao-Quixote's Blog

Canvas核心技术(一)

1、canvas元素大小与绘图表面的大小

规范应该使用下面的方式规定canvas的尺寸:

<canvas width="300" height="150"><canvas>

当使用width和height声明canvas时,该元素的大小与绘图表面的大小相同。当使用css去修改元素的大小时,只是元素大小发生改变了,但是绘图表面还是原来的大小并没有发生改变,此时,浏览器会对绘图表面进行缩放,使其符合元素的大小。

PS:width与height的默认值分别为300*150。

2、Canvas状态的保存与恢复

  • context.save()方法会将当前canvas的状态压到一个保存canvas状态栈的顶端。
  • context.restore()方法会将canvas状态堆栈顶端的canvas状态弹出,并将canvas当前的状态压栈

3、context.lineJoin属性

lineJoin属性设置或者返回当两条线相交时所创建的边角的类型。

bevel: 创建斜角
round: 创建圆角
miter: 默认,创建尖角

注:值miter受miterLimit属性的影响

4、context.miterLimit

context.miterLimit = number;

miterLimit属性设置或者返回最大斜接长度。斜接长度是指在两条线交汇处内角和外角之间的距离。边角的角度越小,斜接长度就会越大。

只有当lineJoin属性为“miter”时,miterLimit才有效。但是,如果斜接长度超过miterLimit端值,边角会以lineJoin=“bevel”的类型来显示。

5、阴影

  • shadowBlur: 表示阴影效果如何延伸的double值。
  • shadowOffsetX: 阴影在X轴方向的偏移量,单位为像素,默认值为0
  • shadowOffsetX: 阴影在Y轴方向的偏移量,单位为像素,默认值为0
  • shadowColor: css格式的颜色字串,默认值rgba(0,0,0,0),意思是完全透明的黑色

以上属性都属于context对象。

6、渐变色与图案

  • context.createLinearGradient(x1,y1,x2,y2): 创建一个线性渐变,渐变方向为从点(x1, y1)到点(x2, y2),该方法返回CanvasGradient的一个对象,该对象只有一个addColorStop方法
  • context.createRadialGradient(x1, y1, r1, x2, y2, r2): 创建一个放射渐变,渐变区域为从圆(x1, y1, r1)到圆(x2, y2, r2)所定义的圆锥区域内,返回值同context.createLinearGradient方法
  • context.createPattern(img | canvas | video, repeatStyle): 创建一幅图像来填充,第一个参数为生成图像的源,第二个为Pattern的重复模式。返回值为一个pattern实例

以上三个方法的返回值均可赋值给fillStyle或者strokeStyle,用来设置填充或者边线。