阴影

创建阴影效果的唯一方法是将shadowColor修改为不透明值,同时将shadowBlurshadowOffsetXshadowOffsetY都设置为非0值。其中shadowBlur控制模糊度,后两者控制阴影的偏离距离。

渐变

画布支持两种类型的渐变:线性渐变和放射渐变。

  • 线性渐变——createLinearGradient
  • 放射渐变——createRadialGradient

两种渐变都返回一个CanvasGradient对象,fillStylestrokeStyle都可以接受以CanvasGradient对象表示的渐变颜色值。

createLinearGradient(beginX, beginY, endX, endY)

createLinearGradient方法有4个参数:渐变起点(x, y)坐标,渐变终点(x, y)坐标。起点和终点描述了渐变效果的长度、位置和方向。(例子中是从画布的左上角开始,延伸到左下角)
定义好渐变后还需要添加起点和终点的颜色,即addColorStop方法。它有两个参数:颜色的偏移值(0表示渐变起点,1表示渐变终点),以及该偏移的颜色值。(例子中是从起点黑色变化到白色)

createRadialGradient(x0, y0, r0, x1, y1, r1)

createLinearGradient方法有4个参数:渐变起点(x, y)坐标,渐变终点(x, y)坐标。起点和终点描述了渐变效果的长度、位置和方向。实际的渐变效果是连接两个圆周的锥体,其中开始圆之前的锥体部分显示偏移值为0的颜色,而结束圆之后的锥体部分显示偏移值为1的颜色。(例子中左边图形的开始圆为黑色,慢慢褪色为结束圆的浅灰色,延伸到左上角,右边图形是将开始圆和结束圆放置在同一个位置。)


参考资料:《Foundation HTML5 Canvas For Games and Entertainment》Chapter 4 Authors: Hawkes, Rob