Canvas应用

丰富Canvas应用

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

01-22侠课岛    初级拔高       

前端/前端/前端系列课程P2 15     0     471

(二十八)丰富Canvas应用

1:添加样式

  • fillStyle - 填充

    • 颜色 - CSS 颜色值
    ctx.fillStyle = '#329FD9';
    ctx.fillRect(0, 0, 400, 100);
    • 渐变对象 - Gradient

    • createLinearGradient

    const linearGradient = ctx.createLinearGradient(0, 300, 400, 0);
    linearGradient.addColorStop(0, "#8A469B");
    linearGradient.addColorStop(0.5, "#FFFFFF");
    linearGradient.addColorStop(1, "#EA7F26");
    ctx.fillStyle = linearGradient;
    
    ctx.fillRect(0, 100, 400, 100);
    • createRadialGradient

```css
/* 径向渐变 - 同心圆 */
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);
  • 图案(视频)对象 - Pattern

    • ctx.createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");

      const img = new Image();
      img.src = "./backup.png";
      img.onload = () => {
      const pattern = ctx.createPattern(img, 'repeat');
      ctx.fillStyle = pattern;
      
      ctx.fillRect(0, 400, 400, 100);
      }
  • 设置之后成为默认属性

  • strokeStyle - 轮廓

    • 颜色
    • 渐变对象
    • 图案(视频)对象
    • 设置之后成为默认属性
  • transparency - 透明度

    ctx.globalAlpha = 0.1;
  • line style - 线条样式

    • lineWidth - 线条宽度
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo(10, 10);
    ctx.lineTo(50, 50);
    ctx.closePath();
    ctx.stroke();
    • lineCap - 线条端样式
    ctx.beginPath();
    ctx.moveTo(20, 150);
    ctx.lineTo(20, 250);
    ctx.lineWidth = 20;
    ctx.lineCap = 'round';
    ctx.stroke();
    • butt - 平直的边缘 - 默认

    • round - 圆形线帽 - 宽度一半

    • square - 正方形线帽 - 宽度一半

    • lineJoin - 线条连接处端样式 - 同一path

    • miter - 尖角 - 默认

    • bevel - 斜角

    • round - 圆角

    • miterLimit - 斜接长度(不做介绍)

    • setLineDash - [实线长度, 间隙长度] - 虚线样式

    • lineDashOffset - 起始偏移量

    ctx.lineWidth = 1;
    ctx.setLineDash([45, 5]);
    ctx.lineDashOffset = -5;
    ctx.strokeRect(10, 450, 500, 100);

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

15

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?