自定义控件前端

丰富Canvas的应用

2019-07-12  本文已影响2人  前白

这篇文章主要介绍了多媒体样式,Canvas填充、文本以及图片等多媒体样式应用, 结合状态保存与恢复介绍了Canvas如何绘制多彩的内容。

1:添加样式

主要有填充样式(fillStyle),轮廓的样式(strokeStyle),然后还有一个透明度(transparency)和线条样式(line style)。它们有一个共同的属性是设置之后都会成为默认属性。

填充样式

    ctx.fillStyle = '#329FD9';
    ctx.fillRect(0, 0, 400, 100);

关于canvas的径向渐变,我们可以理解为,有两个小圆,作两个圆的切线,让两者有一个交点,如果两圆重合了,那么得到的就是一个向上的漏斗,我们可以理解为的范围就是无限大的,或者说在整个区域内都是我们可以见到的范围。如果两圆分开,看到的渐变范围就是一个锥形。两圆重合就是无限大的,两个圆心的连线就是渐变的范围。

   /* 径向渐变 - 同心圆 */
  //创建径向渐变对象,接收六个参数,如上图,左边蓝色是一个圆,有一个圆心一个半径,200,250,10分别对应左边圆的圆心位置和圆半径;同样的右边绿色的圆对应的就是后面三个参数的圆的位置。
  const radialGradient1 = ctx.createRadialGradient(200, 250, 10, 200, 250, 60);
  radialGradient1.addColorStop(0, "#8A469B");
  radialGradient1.addColorStop(1, "#EA7F26");
  ctx.fillStyle = radialGradient1;
 ​
  ctx.fillRect(0, 200, 400, 100);

 ​
  /* 径向渐变 - 非同心圆 */
  const radialGradient2 = ctx.createRadialGradient(60, 350, 10, 350, 350, 60);
  radialGradient2.addColorStop(0, "#8A469B");
  radialGradient2.addColorStop(1, "#EA7F26");
  ctx.fillStyle = radialGradient2;
 ​
  ctx.fillRect(0, 300, 400, 100);

轮廓的样式(strokeStyle)

同 fillStyle 用法一样,只不过strokeStyle变成了边框。同样可以添加以下属性:

透明度(transparency)

ctx.globalAlpha = 0.1;

线条样式

2:绘制文本

在canvas中绘制文本一共有6个属性:font、textAlign、textBaseline、direction、fillText 和 strokeText。

font(文本样式)

textAlign(文字的排列方向)

textBaseline(基线)

direction(方向)

fillText

strokeText

3:绘制图片

4:状态保存

上一篇下一篇

猜你喜欢

热点阅读