三种图表技术SVG、Canvas、WebGL 3D比较
1.什么是SVG？描述：一种使用XML描述的2D图形的语言SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处...
Canvas图形编辑器-数据结构与History(undo/redo)
Canvas图形编辑器-数据结构与History(undo/redo) 这是作为 社区老给我推Canvas，于是我也学习Canvas做了个简历编辑器 的后续内容，主要是介绍了对数据结构的设计以及History能力的实现。 在线编辑: https://windrunnermax.github.io/C...
uni-app使用wx-canvas实现微信小程序上显示地图map和坐标geo
源码<template> <view class="echart-box"> <canvas class="ec-ca...
html2canvas转图片不清晰的问题
需要做一个生成海报的功能，然后发现生成的图片会特别模糊；现在来记录一下解决方案：这里使用的是背景图，然后生成图片，生成以后的图片：效果非常模糊 图片大小226kb 依据：名称默认值 dpi96将分辨率提高到特定的DPI（每英寸点数）scale1按比例增加分辨率 (2=...
利用canvas制作图片（可缩放和平移）+相框+文字
前言：公司一个售前问我能不能用H5做一个手机拍照，给相片添加相框和添加文字上传到服务器的功能，我当时一琢磨觉得可行，就利用空余时间做了一个demo，去掉了拍照和上传...
unity 3D中实现canvas自适应问题
canvas自适应问题的出现：在进行unity中UGUI界面设置时，往往会利用各类组件，控件。当分辨率变换时，相应的如何让各类组件，控件实现大小，位置，状态的自适应成为需要解决的问题问题解决方法1：首先明确一点：如果在UGUI界面中未出现3D模型时，三种canvas渲染模式均可以进行canvas自适...
unity 搞懂Canvas的Render Mode的三种模式
canvas的Render Mode共有三种模式：Screen Space -OverLay、Screen Space-Camera、World Space。我们先来说Screen Space-Camera，这个了解了，其他模式也就简单了。顾名思义，此模式我们需要一个Camera，这个相机的作用就是...
Unity | Canvas - Render Mode 的三种模式
每个 GUI 控件都是画布的子对象（添加控件时，GUI 会自动创建画布）Screen Space - OverlayUI元素置于屏幕上方画布自动适应屏幕尺寸改变Screen Space - Camera画布自动适应屏幕尺寸改变需要设置摄像机 render cameraWorld SpaceGUI控件...
vue canvas绘制信令图，动态显示标题、宽度、高度
需求: 1、 根据后端返回的数据，动态绘制出信令图 2、根据 dataStatus 返回值： 0 和 1， 判断 文字内容的颜色，0：#000，1：red 3.、根据 lineType 返回值： 0 和 1， 判断 箭头线的显示 是实线、虚线 4、根据返回的文字内容的换行符：“\r\n” 自动换行...
小程序 Canvas 文字居中解决方案
使用 ctx.measureText 计算文本宽度let ctx = wx.createCanvasContext('Poster');let str = `这是一段居中的文字`let W = this.data.buildWidth;ctx.setFillStyle('#99bef5');ctx....
小程序利用canvas实现一键保存图片功能（合并图片，双指缩放，旋转，默认裁剪画布大小的尺寸）
**css **.container { position: relative; width: 100%; height: 100%; background: #000;}.img { position: absolute; top: 5%; left: 50%; trans...
html2canvas生成的图片数据太大传不到后台之解决方法————js转成文件传给后台
继我的上一篇博客——https://blog.csdn.net/Sun_of_Rainy/article/details/86693056现在来解决问题，解决思路（同事帮忙想出来的，我来学习哈，顺便记录下）是通过js将数据放到文件中，将文件传给后台将画布数据转成文件的方法我的js截图方法代码贴出来：...
canvas-0trasform.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>...
Canvas俄罗斯方块
写在前面潜水博客园多年，从未写过博客。最近才注册博客，遂将很久前写的俄罗斯方块分享出来。第一次写博客，不喜勿喷。。。游戏说明游戏操作：J向左，L向右，I旋转，K快速下降游戏基于HTML canvas开发，请在支持HTML5的浏览器中运行（IE9+, Chrome, Firefox...）目前通过Co...
canvas rotate中心点问题详解
ctx.fillStyle = "rgb(250,0,0)";ctx.save();ctx.translate(50,50); //这个translate(50，50)发生在rotate()之前,其目的是将旋转点从默认点(0，0),移动到(50，50),下面紧跟着的rotate就是按照这个点来转//...
VUE 移动SPA html2canvas截图不清晰问题
1、最近做一个移动web,用到html2canvas截图模糊问题一直存在网上找了很久依然没有解决 ：原因是devicePixelRatio决定了canvas的清晰度 ：网上又有了修改html2canvas源码生成dom元素的宽高倍数var node = ((nodeList === undefine...
Canvas - 使用画布实现内侧阴影和外侧阴影
前言本方法也使用画布和JavaScript通过浏览器绘制文本和实现特殊效果。通过画布无法直接实现内侧渐变的阴影效果或插图效果，但是，使用stroke方法可以模拟文本中的内侧阴影。 准备工作本方法会使用前面章节已经使用过的一段代码。可以从Packt Publishing的网站直接下载这段代码，它与2....
uni-app踩坑之canvas绘制不显示
uni-app踩坑之canvas绘制不显示问题描述：如下图所示，我用canvasShow来控制 canvas相关dom的隐藏与出现canvasShow的默认值为false，当canvasShow的值第一次变为true时，绘制的矩形并不能出现；之后就能正常出现了。问题分析：在canvasShow第一次...
web移动端html2canvas踩坑
1.跨域图片无法展示我们的图片资源是走cdn的，所以导致了图片的链接域名与网页的域名不一致，而产生了跨域问题，可能导致图片无法展示。解决：步骤1：将html2canvas中的参数设置中的useCORS属性改为true，使html2canvas接受处理跨域资源。步骤2： 使图片资源允许跨域（响应头中...
移动端的canvas电子签名
移动端的canvas电子签名效果，使用的是touch事件，pc端不支持canvas设置的是手机端全屏宽高，可自己进行设置，手指滑动即可代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><tit...