Canvas
3D轻量化引擎工具助力Canvas GFX开发插图新产品，可视化视图更精准！
从原型制作到生产，HOOPS工具包为独立软件供应商提供了增材工作流程的核心功能，例如访问3D文件格式转换和基于Web的可视化、超大规模3D模型轻量化、自动修复、网格生成、偏移、布尔运算等。 ......
微信小程序使用ec-canvas在真机上预览图表模糊的解决办法
在初始化echarts的方法中 添加 `devicePixelRatio: dpr`，代码如下: ``` const [ec, setEc] = useState({ // 初始化图表 onInit: (canvas, width, height, dpr) => { chart = echarts ......
记录在【Windows】下安装【node-canvas】遇到的各种问题（无法安装canvas，安装canvas包报错error...）
好久没更新博客了，因为工作越来越忙，没什么时间去记录一些问题，最近闲下来一点，由于某些原因不得不暂时在Windows下做开发，项目用到了node-canvas处理图片什么的，在安装的时候各种报错，确实让人很抓狂，这里简单记录下： 首先说明下，node-canvas的 官方git仓库 https:// ......
使用 Canvas 和 JavaScript 使多人关系图具有拖放和事件等交互性
一些多人关系图谱是分析数据的可视化工具，对分析数据有很大作用，下面手写一个简单的demo <!DOCTYPE html> <html> <head> <title>多人关系图</title> <style> canvas { border: 1px solid #000; } </style> </ ......
怎么通过Power Apps Canvas来录入语音传给OpenAI Wisper
上篇文章介绍了怎么通过custom connector来配通OpenAI Wisper 在canvas里， 通过 custom connector来call OpenAI Wisper很简单。 1. 关联上custom connector和本app 2. 做个按钮在OnSelect中获取Microp ......
ios15使用html2canvas页面白屏、崩溃、自动刷新
原文链接：https://www.cnblogs.com/yalong/p/17408067.html 背景 有个H5内嵌App的项目，做分享功能的时候用到了 html2canvas, 在IOS15(Iphone11 pro)上， 只要点击分享就会触发页面reload 或者直接白屏，把H5链接在手机 ......
SVG和Canvas
SVG SVG，即可缩放矢量图形(Scalable Vector Graphics)，是一种 XML 应用，可以以一种简洁、可移植的形式表示图形信息。 SVG 主要可以概括为以下几点： SVG 指可伸缩矢量图形 SVG 用来定义网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在 ......
解决webgl使用canvas.toDataURL()没有内容的问题
这个问题很好解决，就是在获取webgl对象的时候，多传入一个{preserveDrawingBuffer: true}，然后在使用canvas.toDataURL()获取就能够获取到了。案例： var canvas = document.getElementById("canva ......
Blob/DataURL/canvas/image的相互转换
/* */ // canvas转dataURL：canvas对象、转换格式、图像品质 function canvasToDataURL(canvas, format, quality){ return canvas.toDataURL(format||'image/jpeg', quality||1 ......
网页截图,html2canvas简单示例
<div id="box"> <p>asd4a5s6fa6s5f1asf</p> <img style="width:200px" src="xxxxxx.png" /> <button style="width:100px;height:30px" onclick="prtsc()">prtsc< ......
WPF中将Canvas导出为png图片
1 public static void ExportToPng(this Canvas canvas,Uri path) 2 { 3 if(path==null) 4 { 5 return; 6 } 7 Transform transform =canvas.LayoutTransform; 8 ......
当我第一次通过Kotlin和Compose来实现一个Canvas时, 我收获了什么?
自从2019年Google推荐Kotlin为Android开发的首选语言以来已经经历了将近四年的时间, Compose的1.0版本也发布了将近2年的时间, Kotlin+Compose在现阶段的Android开发过程中还远远达不到主流的程度. 我们是否应该开始尝试这个组合? 这个组合有会给我们带来什... ......
canvas指纹追踪技术
通过canvas生成一个base64的字符串对于设备、操作系统、浏览器生成的 function uuid() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const t ......
如何通过canvas实现粗细不同的电子签名
想要实现一个电子签名，可以支持鼠标签名，还能类似书法效果线条有粗有细，同时可以导出成图片. 一、实现连贯的划线 1）首先需要注册鼠标下压、鼠标放开、鼠标移出和鼠标移动事件，通过鼠标下压赋值downFlag标记开始绘制 2) 鼠标移动时，将当前坐标位置传入绘制方法，通过lineTo方法实现绘制 /** ......
Windows 下安装node-canvas
1.先安装 Python; 通过Python 官网 http://www.python.org/getit/ 下载并安装最新版本. 然后将Python 的安装目录(如: C:\Program Files\Python) 添加到PATH环境变量中; 2.安装node-gyp 或将 npm 升级到内含 ......
微信小程序使用canvas2d实现拼图游戏
根据周文洁微信小程序开发实战编写，但是微信更新了canvas接口，按照书上写的已经不能使用了。 目录 改进后如下： app.wxss: 1 .container { 2 height: 100vh; 3 color: #E64340; 4 font-weight: bold; 5 display: ......
手动下载canvas、地图的当前画面（下载为图片）
functionDownloadImg() {//使用前需要npm下载html2canvas并引入组件中才能使用 html2canvas(document.querySelector("#map"), {//参数为容器的dom // 转换为图片 backgroundColor: "#ffffff", ......
canvas绘制多边形
1、获取ctx，id为canvasId的canvas标签 document.getElementById("canvasId")。getXO你text("2d"); 2、确定尺寸 3、添加点击画布的监听 ctx.addEventListener("click",(e)=>that.addLis(e) ......
浅谈两种前端截图方式：Canvas截图 vs SVG截图
背景 如今很多网站都引入截图功能，可用于问题反馈、内容分享等实用需求，而前端截图也不知不觉成为了首选。今天为大家推荐两种前端截图方式，虽然有些局限，但是也能应付大部分项目需求。 Canvas截图：html2canvas SVG截图：rasterizehtml 原理 首先来谈下两种前端截图方式的原理， ......
canvas和svg区别
Canvas描述：通过Javascript来绘制2D图形。是逐像素进行渲染的。其位置发生改变，会重新进行绘制。 SVG描述：一种使用XML描述的2D图形的语言SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图 ......
html2canvas插件使用小结
简介 html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Fl ......
Mapboxgl Chrome75版本下发现问题：中文标签无法加载，由Canvas的measureText()方法导致
很刁钻的问题，排查了好久。 我自己开发测试用的浏览器（版本为112）运行正常，在老版本（75）谷歌浏览器报错如下： mapbox-gl.js:32 Uncaught TypeError: Failed to execute 'getImageData' on 'CanvasRenderingCont ......
canvas如何实现鼠标绘制图形以及拖拽
const shapes = []; var animate // 画布初始化 export const canvasInit = () => { const cvs = document.querySelector('canvas'); const ctx = cvs.getContext('2d ......
canvas 基本用法
了解canvas canvas 是一个可以使用脚本来绘制图形HTML元素。可以用于绘制图形，制作图片或者制作简单的动画 基本用法 <canvas id='tudorial' width='150' height='150'> </canvas> canvas 看起来跟 img 元素很像，不同的是没有 ......
HTML5 Canvas和SVG的区别
Canvas 主要是用笔刷来绘制 2D 图形的。 SVG 主要是用标签来绘制不规则矢量图的。 相同点：都是主要用来画 2D 图形的。 区别：SVG 画的是矢量图，Canvas 画的是位图； SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂；SVG 支持分层和事件，Canvas 不 ......
power apps canvas 最新scan 扫描功能 barcode， QR code
Barcode reader现在全面代替barcode scanner barcode reader现在只能通过 power apps mobile app 或者 power apps Windows UWP app来使用。 还不能通过浏览器使用 Barcode reader 控件支持下面数据类型 ......
Power Apps Canvas Modern Controls
Canvas的“丑”一直被人诟病， 但是新的modern control基于fluent UI 给大家一种回到现代的感觉。 https://powerapps.microsoft.com/en-us/blog/modern-controls-coming-to-canvas-apps/ 新的mode ......
canvas实现图片镜像翻转的2种方式
canvas实现图片镜像翻转的2种方式 原文引用：https://www.qetool.com/scripts/view/23387.html 1. 通过canvas自带的画布方法进行翻转 var img = new Image(); //这个就是 img标签的dom对象 img.src = './ ......
canvas绘制3D金字塔
var canvas1 = document.getElementById("canvas1"); var context = canvas1.getContext("2d"); canvas1.width = 400; canvas1.height = 400; context.beginPath ......
小程序canvas导入字体
在需要使用自定义字体的页面中，在canvas绘制之前加入以下代码： wx.loadFontFace({ family: '自定义字体名称', source: 'url("字体文件的路径")', scopes: ['webview', 'native'],//由于canvas是原生组件，所以需要加上n ......