canvas webgl
微信小程序画布canvas的使用
wxml部分: <view class="container"> <canvas class="canvas1" id="myCanvas" type="2d" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="can ......
HTML元素截图(html2canvas)
html2canvas 官网 ：http://html2canvas.hertzen.com/ 开源地址：https://github.com/niklasvh/html2canvas <body> <div id="div"> <span>内容</span> <div style="height: ......
微信小程序中使用ec-canvas
首先引入ec-canvas插件 首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。 然后拷贝项目中的 ec-canvas 到自己的项目中，我是拷贝到了components文件夹中。 ec-canvas 目录下有一个 echarts.js，默认我们会在每次 ec ......
webgl 系列 —— 着色器语言
其他章节请看： webgl 系列 着色器语言 本篇开始学习着色器语言 —— GLSL全称是 Graphics Library Shader Language （图形库着色器语言） GLSL 是一门独立的语言，和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句（if）、函数、数组等等。 ......
使用html2canvas+jspdf将页面转为pdf并下载
1、安装html2canvas和jspdf npm install html2canvas npm install jspdf 2、新建文件htmlToPdf.ts // 导出页面为PDF格式 import html2Canvas from 'html2canvas' import JsPDF fr ......
使用html2canvas+jspdf将页面转为pdf并下载
需求：我有一个页面，是由多个模块组成的，现在我需要把页面转为pdf并下载，但是因为pdf自动换页以后会把我的模块给截开，不好看甚至内容被裁开，所以我需要判断当前页面加上这个模块以后是不是会超出当前页，如果超出，就直接把整个模块换到第二页去显示。 页面大致如下： 页面代码大致如下： <template ......
canvas线格图形,可移动
效果图片 其中的小圆可以移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="vi ......
v8 js代码与canvas的绘制
v8::MaybeLocal<v8::Value> maybe_result; if (V8ScriptRunner::CompileScript(script_state, *classic_script, compile_options, no_cache_reason, host_define ......
html2canvas
Web页面转换为图片并下载 下载图片 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Web页面转换为图片并下载</title> <!-- <script src="https://cdnjs.cloudflare.com/aj ......
Canvas实现画布的缩放
主要介绍三种方式： 首先创建一个index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met ......
Canvas 入门
为什么要使用 Canvas 可能你有同样的疑惑，那不妨先问自己一个问题：当你需要在网页上展示一些形状的时候，你会怎样做？ 面对一些简单的形状（点、直线、矩形、直角三角形等）且在仅用于展示的情况下，其实用 HTML 配合 CSS 就可以完成。 对于 CSS 有一定了解的话，你会发现复杂的图形也不过是简 ......
SVG、Canvas、WebGL对比
SVG 使用XML描述2D图形 SVG中的元素和HTML元素一样，在输出图形前需要经过浏览器引擎的解析、布局计算和生成DOM树（SVG 元素太多时非常消耗性能），可以添加事件 SVG 对象的属性发生变化，浏览器自动重现图形 SVG绘制矢量图形，不依赖于终端设备的像素，可以随意放大缩小不会失真 适合场 ......
webgl 系列 —— 绘制猫
其他章节请看： webgl 系列 绘制猫 上文我们了解了如何绘制渐变彩色三角形，明白了图形装配、光栅化，以及片元着色器计算片元的颜色。 现在如果让你绘制如下一只猫。难道绘制很多三角形，然后指定它们的颜色？那样简直太难、太繁琐了。 这时可以使用三维图形学中的纹理映射技术来解决这个问题。 纹理映射简单来 ......
wxml2canvas爬坑之路
效果图： 前提： 公司要求生成一分报告并转为图片并保存，之前用canvas画过，但这次是在不想用canvas一点点画了，再往上找了n久，爬了n多坑，终于搞出来了 插件： wxml2canvas 一：下载插件 npm install wxml2canvas 二：构建npm 微信开发者工具： 工具 -- ......
webgl 系列 —— 三角形
其他章节请看： webgl 系列 三角形 有人说三维模型的基本单元是三角形。比如复杂的游戏角色，也只是用许多三角形画出来的。 不管上述说法是否属实，本篇先把三角形画出来。 如何绘制一个三角形 鼠标点击绘点示例我们写了这样的代码： points.forEach(item => { gl.vertexA ......
webgl 系列 —— 变换矩阵和动画
其他章节请看： webgl 系列 变换矩阵和动画 动画就是不停地将某个东西变换（transform）。例如将三角形不停地旋转就是一个动画 和 CSS transform 类似，变换有三种形式：平移、缩放和旋转。 简单的变换用普通表达式容易实现，如果事情复杂，比如旋转后平移，这时就可以使用变换矩阵。 ......
webgl 系列 —— 渐变三角形
其他章节请看： webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析：varying变量、合并缓冲区、图形装配、光栅化、varying 内插 绘制三个点v1 需求：绘制三个相同颜色的点，效果如下： 通过三角形的学习，这个需求非常容易实现。代码如下： const VSHADER_SOUR ......
webgl 系列 —— 绘制一个点（版本2、版本3、版本4、版本5）
其他章节请看： webgl 系列 绘制一个点 我们初步认识了 webgl，本篇主要围绕绘制一个点的示例，逐步实现下面功能： 点的位置从 js 传入着色器 点的大小由 js 传入着色器 通过鼠标点击绘点 通过鼠标点击绘点，并改变点的颜色 绘制一个点（版本2） 需求 在上篇中我们在canvas中心绘制了 ......
webgl 系列 —— 初识 WebGL
其他章节请看： webgl 系列 初识 WebGL 什么是 WebGL webgl 在支持 canvas 的浏览器中进行 2d 或 3d 渲染。 webgl 程序除了有 Html、javascript，还需要加入着色器语言（GLSL ES）。 WebGL 使得网页在支持 HTML <canvas> ......