快应用使用canvas替换背景色

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="width: 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>

快应用使用canvas替换背景色

渐变色

猜你喜欢