canvas绘制3D金字塔

Posted 2023-05-04

参考技术A ```

var canvas1 = document.getElementById("canvas1");

var context = canvas1.getContext("2d");

canvas1.width = 400;

canvas1.height = 400;

context.beginPath();

context.moveTo(0, 360);

context.lineTo(200, 400);

context.lineTo(400, 360);

context.lineTo(350, 280);

context.lineTo(200, 310);

context.lineTo(50, 280);

context.lineTo(0, 360);

var grd1 = context.createLinearGradient(0, 360, 400, 360);

grd1.addColorStop(0, '#92f9cb');

grd1.addColorStop(1, '#1dc2fa');

context.fillStyle = grd1;

context.fill();

context.closePath();

context.beginPath();

context.moveTo(50, 260);

context.lineTo(200, 290);

context.lineTo(350, 260);

context.lineTo(300, 180);

context.lineTo(200, 200);

context.lineTo(100, 180);

context.lineTo(50, 260);

var grd1 = context.createLinearGradient(50, 260, 350, 260);

grd1.addColorStop(0, '#fa7198');

grd1.addColorStop(1, '#d5b73a');

context.fillStyle = grd1;

context.fill();

context.closePath();

context.beginPath();

context.moveTo(100, 160);

context.lineTo(200, 180);

context.lineTo(300, 160);

context.lineTo(250, 90);

context.lineTo(200, 100);

context.lineTo(150, 90);

context.lineTo(100, 160);

var grd1 = context.createLinearGradient(100, 160, 300, 160);

grd1.addColorStop(0, '#06f5ff');

grd1.addColorStop(1, '#052e79');

context.fillStyle = grd1;

context.fill();

context.closePath();

context.beginPath();

context.moveTo(150, 75);

context.lineTo(200, 85);

context.lineTo(250, 75);

context.lineTo(200,0);

context.lineTo(150, 75);

var grd1 = context.createLinearGradient(150, 75, 250, 75);

grd1.addColorStop(0, '#c524ff');

grd1.addColorStop(1, '#d6a6d9');

context.fillStyle = grd1;

context.fill();

context.closePath();

context.beginPath();

context.moveTo(200, 0);

context.lineTo(200, 400);

context.lineWidth = 0.3;

context.strokeStyle = "#051243";

context.stroke();

context.closePath();

```

Android UICanvas 画布 ⑦ ( Canvas 绘制显示区域 | Canvas 绘制矩形源码分析 )

文章目录

• 一、Canvas 绘制显示区域
• 二、Canvas 绘制矩形源码分析

Canvas 状态保存机制 中 , 存在两个栈结构 , 分别是 状态栈 和 图层栈 ;

其中 图层栈 又称为 Layer 栈 ;

Canvas 画布中 , 有 $2$ 套坐标系 , 分别是 :

• Canvas 自身坐标系
• Canvas 绘图坐标系

一、Canvas 绘制显示区域

---

Canvas 绘制时 , 并不是由 Canvas 进行绘制 , 具体 执行绘制的硬件是 GPU ; 绘制的位置依赖于 Canvas 的两个坐标系 , 自身坐标系 与 绘图坐标系 ;

Canvas 中绘制图像的 具体位置 是坐标系 中的位置坐标 , 坐标分为以下两种 :

Canvas 自身坐标系 是 状态栈 中 最外层的坐标系 , 组件一旦创建成功 , 该坐标系是不会改变的 ; Canvas 自身坐标系是在 绘制流程中 ViewRootImpl#draw 方法中确定的 , 是无法改变的 ; 参考 【Android UI】Canvas 画布 ⑥ ( Canvas 绘图源码分析 | ViewRootImpl#draw 方法源码 | ViewRootImpl#drawSoftware 方法源码 ) 博客 ;

Canvas 绘图坐标系 是 当前要绘制的图像 所在的 坐标系 , 该 绘图坐标系 表示具体绘制的元素要画到哪个位置 , 该 绘图坐标系 是通过对 Canvas 自身坐标系 进行若干次的 平移 , 旋转 , 缩放 得来的 ;

调用 Canvas#translate , Canvas#rotate , Canvas#scale 方法 , 可以改变 Canvas 的绘图坐标系 ;

Canvas 自身坐标系 有一个很重要的作用 就是 确定画布范围 , 之后所有的绘制内容只能显示这个画布范围内的元素 , 画出边界的元素是不显示的 ;

如下图 , 蓝色矩形框是 Canvas 自身坐标系 , 红色矩形框是 Canvas 绘图坐标系 , 两个坐标系重合部分 绿色矩形框 就是显示的部分 , 红色矩形框范围绘制的内容不显示在界面中 ;

二、Canvas 绘制矩形源码分析

---

调用 Canvas#drawRect 方法绘制矩形 , 调用的函数原型如下 :

    /**
     * 使用指定的绘制绘制指定的矩形。矩形将根据绘画中的样式填充或边框。
     *
     * @param rect 要绘制的矩形
     * @param paint 绘制矩形的画笔
     */
    public void drawRect(@NonNull RectF rect, @NonNull Paint paint) 
        super.drawRect(rect, paint);
    

在上述函数中 , 调用了父类的 BaseCanvas#drawRect 方法 ,

    public void drawRect(@NonNull RectF rect, @NonNull Paint paint) 
        throwIfHasHwBitmapInSwMode(paint);
        nDrawRect(mNativeCanvasWrapper,
                rect.left, rect.top, rect.right, rect.bottom, paint.getNativeInstance());
    

在上述函数中 , 调用了 native 方法 BaseCanvas#nDrawRect , 该方法用于调用 GPU 进行绘图 ;

    private static native void nDrawRect(long nativeCanvas, float left, float top, float right,
            float bottom, long nativePaint);

绘制矩形时 , 将 Rect 拆分成了 左上右下 四个数据 , float left, float top, float right, float bottom , 这是绘图坐标系中的数据 ;