图形处理:给 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库探索并实现了两种地面构造方法,除了两种确定的构造方法外,本文还包含了对 ... »

canvas 纯 Js 实现五角星

效果如图--【最开始想法上走了弯路,计划取10个顶点的坐标值,然而坐标值获取没有规律,转变思路之后,迎刃而解】 思路:1.五角星实际上是 右侧特殊四边形围绕底部顶点的5次旋转;2.五角星是两个不同 radius 同心圆,被等分10份,交点形成顶点之后连线形成的。 解决方法: 找到特殊四边形的4个顶点 ... »

基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检

这次为大家展示的是通过 HT for Web 灵活的图型化编辑工具打造的智慧隧道监控系统。通过 HTML5 技术实现了桌面和移动端的跨平台性,同时现实了可视化运维。 这次主要跟大家分享里面的漫游巡检功能,完美进行第一人称视角体验整体结构环境,酷似游戏一样给人一种真实的感受,比平面更加直观,随意游离与... ... »

上传图片如何对图片进行压缩canvas

前言:哈喽,朋友们,最近一直在马不停蹄地赶项目,很久没有写博客了。今天我们来看一下前端上传图片地时候如何对图片进行压缩 1、图片上传 我近期写项目都是使用的VUE,这里上传图片使用了Element-ui这个组件库 具体代码如下: 2、选取合适的钩子 这个组件为我们提供了许多钩子 我这里选择了befo ... »

【朝花夕拾】Android自定义View篇之(二)Canvas常用技巧

上一篇讲View的绘制流程中讲到过,最后一步是draw流程,在这个过程中,子view需要重写onDraw方法来画出自己的内容。在自定义View绘制自身内容的时候,系统提供了3个非常重要的类来帮助开发者画各种炫酷的图形:Canvas、Paint、Path。本篇梳理Canvas相关的基础知识点,主要用于... ... »

【带着canvas去流浪(10)】文字烟花

示例代码托管在: "http://www.github.com/dashnowords/blogs" 博客园地址: "《大史住在大前端》原创博文目录" 华为云社区地址: "【你要的前端打怪升级指南】" [TOC] 一. 文字烟花 文字烟花的小控件是下面这样的效果,你或许在很多个人博客中见过: 这一节 ... »

动态生成二维码并利用canvas合成出一张图片(类似海报、分享页)

在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的地方,还是请各位指教了:-)。 为了做出一张让人满意分享页,页面上的数据有些当然是需要动态展示的,具 ... »

【带着canvas去流浪(4)】绘制散点图

示例代码托管在: "http://www.github.com/dashnowords/blogs" 博客园地址: "《大史住在大前端》原创博文目录" 华为云社区地址: "【你要的前端打怪升级指南】" [TOC] 一. 任务说明 使用原生 绘制散点图。(截图以及数据来自于百度Echarts官方示例库 ... »

【带着canvas去流浪】 (3)绘制饼图

示例代码托管在: "http://www.github.com/dashnowords/blogs" 博客园地址: "《大史住在大前端》原创博文目录" 华为云社区地址: "【你要的前端打怪升级指南】" [TOC] 一. 任务说明 使用原生 绘制饼图(南丁格尔玫瑰)。(截图以及数据来自于百度Echar ... »

Konva入门教程

啥是 Konva "Konva" 是一个 canvas 库,可以让我们像操作 DOM 一样来操作 canvas,并提供了对 canvas 中元素的事件机制,拖放操作的支持。所以,用它来做一个拼图游戏什么的最合适了。此外,你也可以借助它来绘制一个页面的截图,作为大名鼎鼎的 html2canvas 库的 ... »