canvas判断点是否在路径内

应用场景 我们的项目中有个功能是,canvas上的某个图片选中后可以再这个图片上用鼠标拖拽绘制画笔线条。 当然绘制的边界要控制在图片大小范围内的,那么鼠标是可以随意动的,怎么能控制只在图片上的时候才绘制呢? Canvas 2D API 有直接提供的方法:CanvasRenderingContext2 ... »

如何获取canvas当前的缩放值

项目中一直有一个问题困扰着我,我们的画布可以缩放平移旋转,支持拖拽生成图形,生成手写笔迹,如果用户选择的线条粗细为5像素,那么即使画布缩放过绘制出的线条粗细也应该是视觉上的5px,所以再绘制时赋值给context.lineWidth的值需要一个计算过程(利用canvas当前缩放值来计算出一个值)。 ... »

canvas-修改图片亮度

canvas操作-修改图片亮度 图片亮度的概念 我们一般对图片的概念就是又很多像素点构成的一幅图片,一个像素点由RGBA四个值表示。 R:红色 G:绿色 B:蓝色 A:透明度 不过RGBA并不能直观的表现出像素点的亮度,它比较适合机器理解,给一个rgba的像素我们可以猜出它是偏什么颜色的,不过却不能 ... »

微信小程序折线图表折线图加区域图

1.先来个效果图 这里我用的是插件@antv/f2-canvas(安装的方法如下) npm init 此处如果直接使用官方npm install 可能会出现没有node_modules错误 npm install --production 建议使用–production选项,可以减少安装一些业务无关 ... »

网页小实验——用canvas生成精灵动画图片

实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现。 初始图片如下: 一、图片分割 将初始图片分割为六张大小相同的棋子图片 1、html舞台: 1 <!DOCTYPE html> 2 <html lan ... »

canvas性能-drawImage渲染图片

canvas性能-drawImage渲染图片 canvas绘制图片 一般我们绘制图片会用到的方法是drawImage和putImageData,还有作为测试环境使用的createPattern drawImage 描述: 使用方式: ctx.drawImage(image,sx,sy,swidth, ... »

React & Vue2 Butterfly图编排——让数据更自由地驱动DAG

一、简介 Butterfly是由阿里云-数字产业产研部孵化出来的的图编辑器引擎,由咱们部门以及其他开发者共同维护开发,具有使用自由、定制性高的优势,已支持集团内外上百张画布,不夸张的说,我觉得可以算的上“杭州余杭区最自由的图编辑器引擎”。 可是,由于大多数用户对于原生的jquery操作还是略感繁琐, ... »

使用Canvas绘制分享海报

这几天接到一个需求,需要将一个邀请链接转换为一个带有二维码并且能够分享出去的海报图,网上找了很多的方法,也踩了不少的坑,希望大家遇到类似的需求能够少走弯路。。 具体效果图如下: 效果图 首先我采用了 qrcode 的插件,使用这个插件能够生成一个二维码。然后还使用了canvas图片合成的技术,使文字 ... »

html2canvas canvas webgl 截图透明空

#####1. React用这个插件html2canvas完成div截图功能,div里面嵌套canvas,返回base64是透明图片。 html2canvas(document.getElementById("modelWrapper"), { allowTaint: true, useCORS: ... »

一个基于canvas的移动端图片编辑器

插件实现的功能为可页面内初始化载入图片、手动添加手机相册内的图片、或者添加服务器端的图片(服务器端需要开启允许图片跨域)。拥有多种的编辑模式。支持操作画布内的所有图片和单独设置某一种图片的状态或者位置等 ... »

图形处理:给 Canvas 文本填充线性渐变

作者:凹凸曼 - Barrior 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。 猜想与答案 给出两个答案: 正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的 ... »

可拖拽圆形进度条组件(支持移动端)

好久之前写过一个可拖拽圆形进度条的dome,中间有网友反馈过一些问题,最近比较闲有时间修改了一些问题也做了一些优化,并封装成组件,基于canvas实现,只需传入放置组件dom容器,任何框架均可直接使用; codepen 示例如下:https://codepen.io/pangyongsheng/pe ... »

JS实现在线ps功能

功能介绍 本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体,加粗,斜体,下划线,背景色等,同时支持图片已有的操作,拖动图层有辅助线功能,可对画布做放大缩小功能 ... »

基于 HTML5 WebGL 的民航客机飞行监控系统

出差的时候在飞机上看到头顶监控面板上的航行监控系统有一点点的简陋,就制作了一个采用 HT for Web 的升级版监控系统,实现了飞机云中穿行、升降颠簸、因时间变化天空明暗变化等一系列效果,并增加了小地图、飞机信息面板等数据可视化模块。 ... »

基于 HTML5 Canvas 的元素周期表展示

之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”、“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青(氢)菜(钛)”,高中时期记的质量守恒、元素守恒、原子守恒、电子守恒,时间过的飞快,转眼我们都已经这么大了... ... »

WebGL场景的两种地面构造方法

总述:大部分3D编程都涉及到地面元素,在场景中我们使用地面作为其他物体的承载基础,同时也用地面限制场景使用者的移动范围,还可以在通过设置地块的属性为场景的不同位置设置对应的计算规则。本文在WebGL平台上使用Babylon.js库探索并实现了两种地面构造方法,除了两种确定的构造方法外,本文还包含了对 ... »