• 快应用使用canvas替换背景色


    所使用到的知识点:

    第一:canvas绘制矩形

    第二:canvas画图

    第三:canvas矩形填色,清除canvas

    第四;canvas线性渐变

    第五:Uint8ClampedArray---https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray#%E8%AF%AD%E6%B3%95

       const alphaPhoto = new Image();
    
                //原始的
                alphaPhoto.src = `data:image/jpeg;base64,${res.alphy}`;   //阿尔法蒙黑白照
                console.log('图片加载完成', this.width, this.height)
                //原始的
                alphaPhoto.onload = () => {
    
                    gradientCtx.drawImage(alphaPhoto, 0, 0, this.width, this.height);
    
                    this.alphaImgData1 = gradientCtx.getImageData(0, 0, this.width, this.height);
                    console.log(`alphaImgData加载完成`)
                    const originPhoto = new Image();
                    originPhoto.src = `data:image/jpeg;base64,${res.src}`;   //抠出的原图头像
                    originPhoto.onload = () => {
    
                        gradientCtx.drawImage(originPhoto, 0, 0, this.width, this.height);
    
                        this.originImgData1 = gradientCtx.getImageData(0, 0, this.width, this.height); //原图的data
    
                        console.log(`originPhoto加载成功`);
                        //给抠出的图片加上背景
    
                        this.changeGradient(gradientCtx, item.first, item.second)
    
    
                    }
                    originPhoto.onerror = () => {
                        this.load = false;
                        console.log('originPhoto加载失败');
                    }
    
                }
                alphaPhoto.onerror = () => {
                    this.load = false;
                    console.log('alphaPhoto加载失败');
                }

    canvas 的颜色支持各种 CSS 色彩值。

    // 以下值均为 '红色'
    ctx.fillStyle = 'red' //色彩名称
    ctx.fillStyle = '#ff0000' //十六进制色值
    ctx.fillStyle = 'rgb(255,0,0)' //rgb色值
    ctx.fillStyle = 'rgba(255,0,0,1)' //rgba色值

    一:

    渐变色

    除了使用纯色,还支持使用渐变色。先创建渐变色对象,并将渐变色对象作为样式进行绘图,就能绘制出渐变色的图形。

    渐变色对象可以使用 createLinearGradient 创建线性渐变,然后使用 addColorStop 上色。

    这里要注意的是,渐变色对象的坐标尺寸都是相对画布的。应用了渐变色的图形实际起到的是类似“蒙版”的效果。

    //填充绘制一个矩形,填充颜色为深红到深蓝的线性渐变色
    const linGrad1 = ctx.createLinearGradient(0, 0, 300, 300)
    linGrad1.addColorStop(0, 'rgb(200, 0, 0)')
    linGrad1.addColorStop(1, 'rgb(0, 0, 200)')
    ctx.fillStyle = linGrad1
    ctx.fillRect(20, 20, 200, 200)
    <template>
      <div class="doc-page">
        <div class="content">
          <canvas class="new-canvas" id="new-canvas"></canvas>
          <image src="../Common/imgs/beauty.jpg" style=" 500px; height: 600px;"></image>
        </div>
      </div>
    </template>
    
    <style>
    .content {
      flex-direction: column;
      align-items: center;
    
    }
    .new-canvas {
      width: 500px;
      height: 600px;
      background-color: blue;
    }
    </style>
    
    <script>
    export default {
      private: {
        drawComplete: false
      },
      onInit() {
        this.$page.setTitleBar({
          text: 'canvas简单绘制'
        })
      },
      onShow() {
        if (!this.drawComplete) {
          this.drawCanvas()
        }
      },
      drawCanvas() {
        const canvas = this.$element('new-canvas') //获取 canvas 组件
        const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文
        const img = new Image() //新建图像对象
    
        img.src = '../Common/imgs/beauty.jpg' //加载本地图片
    
    
        //加载成功的回调
        img.onload = () => {
          // 将图片原封不动的绘制在画布上,是最基本的绘制方法
          ctx.drawImage(img, 0, 0)
          console.log('图片加载完成')
        }
    
        //加载失败的回调
        img.onerror = () => {
          console.log('图片加载失败')
        }
        this.drawComplete = true
      }
    }
    </script>
  • 相关阅读:
    TypeScript 里的 module 概念
    SAP Spartacus Definition of Done
    SAP Commerce Cloud 新一代 UI Spartacus 和 Customer Data cloud 的集成
    关于 SAP Spartacus 和 SmartEdit 集成的问题
    Linux Boot,Kernel 和 Service 介绍
    Linux 的发展历史,设计哲学和一些常用的术语介绍
    SAP Fiori Elements 公开课第三单元学习笔记
    SAP Fiori Elements 公开课第二单元视频的台词和课程主要内容
    SAP Fiori Elements 公开课第二单元学习笔记:Fiori Elements 架构
    qt-事件处理的方式
  • 原文地址:https://www.cnblogs.com/DZzzz/p/12710771.html
Copyright © 2020-2023  润新知