canvas webgl
微信小程序使用canvas生成分享海报功能复盘
前言 近期需要开发一个微信小程序生成海报分享的功能。在 h5 一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理。但是由于小程序不具备传统意义的 dom 元素，所以也没有办法采用此类工具。 所以就只能一笔一笔的用 canvas 画出来了，下面对实现这个功能中遇到的问 ......
html2canvas截图
注意： 1、supervision_box 获取的Dom节点一定不能使用 overflow：auto， 否则滚动的内容将无法截图（overflow：auto放在父级上面滚动） 2、height: 2800 一定要大于Dom的高度 否则也截图不完整 const downImg = () => { co ......
UE,Unity和WebGL技术对比
title: UE,Unity和WebGL技术对比 banner_img: https://drive.studyinglover.com/api/raw/?path=/photos/blog/background/1679397016745.png date: 2023-3-21 19:00:00 ......
html2canvas 生成一个 base64 的海报
function downloadImage(base64Url) { let imgUrl = base64Url; if (window.navigator.msSaveOrOpenBlob) {//兼容IE浏览器的写法 let imageStr = atob(imgUrl.split(",") ......
uniapp canvas 上传图片添加水印
隐藏canvas，position:fixed;left:100% <canvas :style="{width:canvasWidth,height:canvasHeight}" style="position:fixed;left:100%;" canvas-id="myCanvas" ></c ......
node-canvas 安装报错
node-canvas 安装报错内容一般如下 .... npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build --update-binary npm ERR! Wa ......
微信小程序使用canvas导出图片时提示报错为canvasToTempFilePath:fail fail canvas is empty
uni使用小程序 时，组件里面有个canvas，页面上面也有一个canvs。组件里面的canvas想导出图片，报canvasToTempFilePath:fail fail canvas is empty。 在canvasToTempFilePath里面要加上第二个参数，传入this； uni.ca ......
canvas实现动态替换人物的背景颜色
起因 今天遇见一个特别有意思的小功能。 就是更换人物图像的背景颜色。 大致操作步骤就是:点击人物-实现背景颜色发生变化 将图片绘画到canvas画布上 我们需要将图片绘制到canvas画布上。 这样做的目的是为了方便我们去操作像素点来更改颜色。 首先创建 Image 的实例。将图片的地址赋值给图片实 ......
canvas绘制圆环
初识canvas canvas 我们可以理解为是一个画布。 它是一个载体。 我们的文字，图案，都是在这个载体(画布)上来进行操作的。 canvas的5个要素 canvas 具有的5个要素： 1.id 元素的唯一标识 2.width 宽度 3.height 高度 4.画笔,上下文 canvas.get ......
vscode编写js canvas无代码提示的解决方法
解决方法： 如果是2d上下文，则在获取上下文的前一句加上/** @type {CanvasRenderingContext2D} */ 如果是3d上下文，则加上/** @type {WebGLRenderingContext} */ let drawing = document.querySelec ......
blob/file和object url 和canvas
Blob/File Blob 对象表示一个不可变、原始数据的类文件对象。 const aBlob = new Blob( array, options ); File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。 Blob() 构造函数返回一个新的 Blob ......
WebGL_0019：three.js 欧拉角和四元数
1, 这篇说说欧拉角和四元数，欧拉角和四元数的优缺点是老生常谈的话题了，使用条件我就不多说了，我只说一下使用方法。 1. 欧拉角（Euler） 欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。下面我们开看看它的方法 1. set( x: number, y: num ......
微信小程序canvas 设置旋转css 不生效
问题 项目中有使用canvas 生成条码（一维码）的功能，使用的插件wxbarcode来生成的，但是项目需求的条码是要竖向的，插件的生成的是横向的，不知道是否有参数去控制，当时图省事想着直接用css 旋转一下好了，在模拟器上看到的确实也没有问题，但是在真机上就出问题，没有旋转，还发生了偏移 解决 开 ......
SuperMap-WebGL-S3MTilesLayer（图元操作）
S3MTilesLayer，S3M(Spatial 3D Model)图层类，通过该图层实现加载三维切片缓存，包括倾斜摄影模型、BIM模型、点云数据、精细模型、矢量数据、符号等。 那S3MTilesLayer中针对图元的操作主要有'颜色'，'偏移'，'可见性'等，可通过下面这张表格，查看对应的方法， ......
直播网站源码，Canvas实现圆形时间倒计时进度条
直播网站源码，Canvas实现圆形时间倒计时进度条 在开发canvas程序时，我们通常需要准备静态html和需要引用的js文件即可，这次我们使用的静态html模板如下： 1.html页面 <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <m ......
PowerApps Canvas通过当前审批状态控制只允许审批人编辑
在DetailScreen的OnVisible事件中创建变量varIsApprovalUser判断登录人是否为当前节点的审批人： Set(myself, User());If(!varSelectedParent,UpdateContext({varIsApprovalUser:true}),Swi ......
高性能渲染——详解Html Canvas的优势与性能
本文由葡萄城技术团队原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 一、什么是Canvas 想必学习前端的同学们对Canvas 都不陌生，它是 HTML5 新增的“画布”元素，可以使用JavaScript来绘制图形。 Canvas元素是在HTM ......
canvas实现添加水印
canvas添加水印思路 1.在画布上写上水印的名称(时间加上用户名) 2.canvas转化为base64，作为body的背景色 3.优化倾斜度和透明度 4.如果用户去除body的style水印消失 5.鸡肋 MutationObserver 在画布上写上水印的名称 <body> <canvas i ......
Chromium Canvas工作流
blink 中实现了2种 canvas，分别是 blink::HTMLCanvasElement 和 blink::OffscreenCanvas ，前者对应 html/dom 中的 canvas，后者对应 js 中的 OffscrenCanvas。 html canvas 有两种模式，一种是常规模 ......
用来绘图图形canvas元素的使用
用来绘图图形canvas元素的使用 在html文件中添加一个canvas元素 <canvas id="myCanvas"></canvas> 使用JavaScript获取canvas元素，并获取其2D上下文对象（画笔） const canvas = document.getElementById(' ......
canvas抠取视频绿幕
最近在vue项目中遇到了一个需求就是要展示类似AI 播报的效果，用到了canvas 抠取绿幕视频，不说直接上代码html代码 <!-- 模拟ai播报 --> <video v-if='videoShow' class="noshow" ref="video" id="video" width='38 ......
vue移动鼠标在canvas上画不规则图形（整合别人的，增加了一些功能）
1、draw_shape.js 1 /** 2 * 绘制不规则多边形 3 */ 4 5 import { Message } from 'element-ui' 6 7 export function draw_test(cav, list) { 8 // 画布初始化 9 let ctx = cav ......
[WebGL] sampler2DArray demo 多纹理渲染
背景 之前尝试过利用多个纹理单元，再基于传入给 shader 的 vertexBuffer 信息决定选 1 号纹理单元还是 2 号纹理单元。 虽然理论上，这个方式确实行得通，但是一次 drawcall 绘制多个纹理，本来目的是为了提高绘制性能，而实际上却无法提高性能，甚至还有反作用。 因为有说法是 ......
canvas
canvas画布 var canvas = document.getElementById('canvas') 在当前 HTML 文档中获取 id 属性为 "canvas" 的元素对象，然后将该对象存储在一个名为 canvas 的变量中。通常情况下，这个元素应该是一个 canvas 标签，用于在网页 ......
uniapp之canvas 绘画海报 进行分享、收藏、保存
在这过程中： ① 在uniapp中我之前想的是直接将我的view那一块直接转为海报图片，不可行 ② 海报的图片是我点击分享给每个好友使才出现的，之前使用的是UI制作的图，进行自定义的分享、收藏、保存，当然也不可行 一、绘画海报 绘画海报，我使用的是uniapp的canvas进行要求绘制，https: ......
vue2和vue3导出页面为PDF格式：jspdf和html2canvas
一、vue2导出PDF使用步骤 1、安装html2canvas，将页面html转换成图片 npm install --save html2canvas 卸载： npm uninstall html2canvas 指定版本安装： npm install --save html2canvas@1.0.0 ......
Webgl 基础以及canvasKit学习
一 基础概念 1. 关于canvas 、 webgl 、 skia 、canvasKit ctx.getContext('2d ' / 'webgl ' / 'webgl2')； 类型 2d 、webgl、webgl2 有什么不同？ canvas2d 主要的性能问题就在于，绘制中间对象没法缓存，以及 ......
html2canvas 截图不全问题解决
有个低代码平台项目，需求是要将canvas画布上的echarts图表等组件截图保存，如果是正常比例（也就是百分百比例）截图是正常的，但如果画布处于缩放状态进行截图的话就会因组件上的一些样式影响而导致截图不全。为了解决这一问题，在网上也查找了很多资料，终于找到解决办法，亲测有效。 话不多说，上代码： ......
WebGL 及其在 WebRTC 中的应用
一、前言 1、什么是 WebGL ? WebGL 的全称是 Web Graphics Library，是一种 3D 绘图协议。 WebGL 允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个JavaScript 绑定，WebGL 可 ......