[JavaScript知识库] RN canvas绘制图片阴影

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> RN canvas绘制图片阴影 -> 正文阅读

[JavaScript知识库]RN canvas绘制图片阴影

canvas绘制图片阴影

效果
在这里插入图片描述
引入react-native-canvas
import Canvas, { Image as CanvasImage } from “react-native-canvas”;

数据data.js

{
        buseUrl: imgurl
        width: 206,
        height: 72,
        shadowColor: 'rgba(216, 165, 84, 0.29)',
        shadowOffsetY: 12
}

componentDidMount() {
    // this.handleShawdowFun();
}
// 阴影功能
  handleCanvas = (canvas) => {
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const image = new CanvasImage(canvas);
    image.crossOrigin = "anonymous";
    const imageData = imgData[this.keynum];
    image.src= imageData.buseUrl;
    canvas.width = imageData.width;
    canvas.height = imageData.height + 20;
    image.addEventListener('load', () => {
      ctx.drawImage(image, 0, 0, imageData.width,    imageData.height).then(() => {});
    });
    // 阴影的x偏移量?
    ctx.shadowOffsetX = 0;
    // 阴影的y偏移
    ctx.shadowOffsetY = imageData.shadowOffsetY;
    // 阴影颜色
    ctx.shadowColor = imageData.shadowColor;
    // 阴影的模糊半径
    ctx.shadowBlur = 8;
    // 绘制
    ctx.stroke();
  }
   render() {
    return (
      <Canvas ref={this.handleCanvas}/>
    );
  }