最新文章列表

基于 HTML5 Canvas 的 3D 热力云图效果

前言   数据蕴藏价值,但数据的价值需要用 IT 技术去发现、探索,可视化可以帮助人更好的去分析数据,信息的质量很大程度上依赖于其呈现方 ...
xhload3d 评论(0) 有816人浏览 2020-03-02 00:09

通过canvas转换颜色为RGBA格式及性能问题

转换任意颜色为RGBA格式     前端编程过程中,经常会遇到要把各种颜色格式(比如 “red”、“#F00”、“#FF0000”等)转换成RGBA格式,搜索网络也可以发现一堆的解决方案: image 此处介绍一种方法: 通过canvas的像素获取方法,来获取任意颜色的RGBA数值。大致步骤如下: 首先创建一个尺寸为1*1的canvas,并获取canvas的绘制上下文ctx ...
flyfox1982 评论(0) 有508人浏览 2019-11-22 14:23

通过canvas转换颜色为RGBA格式及性能问题

<div class="iteye-blog-content-contain" style="font-size: 14px"></div>  
flyfox1982 评论(0) 有442人浏览 2019-11-22 14:21

根据贝塞尔曲线上的点反算t值

这是一个项目中遇到的实际需求。 场景是一个智能仓库管理系统,场景里面有直线和曲线构成的环穿轨道。环穿轨道上面会有小车运动,后台推动小车的两个点位A和B,其中A和B都会在轨道上面,前端需要根据这两个推送点,自动播放小车从A点沿轨道到B点的动画。下面是项目截图: 项目中使用的是二次贝塞尔曲线,所以本文也主要以二次贝塞尔曲线为讲解重点。 要实现上述动画,需要首先确定A点和B点在曲线上面的比例值ta ...
flyfox1982 评论(0) 有532人浏览 2019-10-08 14:05

FireFox下Canvas使用图像合成绘制SVG的Bug

本文适合适合对canvas绘制、图形学、前端可视化感兴趣的读者阅读。 楔子 所有的事情都会有一个起因。最近产品上需要做一个这样的功能:给一些 ...
flyfox1982 评论(0) 有746人浏览 2019-07-10 14:31

canvas反向裁剪技巧

我们都知道在canvas 可以通过clip来实现剪裁功能,其步骤一般是先设置要裁剪的区域(路径),然后通过ctx.clip()的实现裁剪,裁剪之后,后续的绘制只能在裁剪的区域显示效果,比如如下一段代码,实现了一个圆形裁剪: ctx.beginPath(); ctx.arc(100,100,50,0,Math.PI*2); ctx.clip(); ctx.rect(0,0,200,20 ...
flyfox1982 评论(0) 有619人浏览 2019-02-15 11:37

微信小程序canvas画不出东西,始终是空白

如果你的canvas不是在页面中,而是在自定义组件中的话,一个可能的原因是: wx.createCanvasContext只传一个参数是不够的,需要再传入第二个参数this,如下: var context = wx.createCanvasContext(mycanvasid,this)  
johnsmith9th 评论(0) 有8875人浏览 2018-11-23 14:17

基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统

前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件 ...
xhload3d 评论(0) 有1472人浏览 2018-05-23 10:01

基于 HTML5 Canvas 的电信机柜 U 位动态管理

前言 U 是一种表示服务器外部尺寸的单位,是 unit 的缩略语,详细的尺寸由作为业界团体的美国电子工业协会(EIA)所决定。之所以要规定服务器的 ...
xhload3d 评论(0) 有1261人浏览 2018-05-07 10:19

canvas的使用

Drawing simple line patterns using HTML5 canvas
千絮泠泉 评论(0) 有528人浏览 2018-04-25 09:57

canvas绘制圆形钟表

【前言】    分享个特效,canvas绘制圆形钟表    先看下效果 【主体】 <canvas width="200px" height="200px" id="clock"></canvas>   var dom = document.getElementById("clock&quo ...
青春..荒唐 评论(0) 有859人浏览 2018-04-23 23:50

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tai

Js Canvas画图加载远程连接报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.   报错Screenshot 尽管没有CORS授权也可以在 canvas 中使用图像, 但这样做就会污染(tain ...
qiaolevip 评论(0) 有9053人浏览 2018-04-10 10:58

基于 HTML5 Canvas 实现的文字动画特效

前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非 ...
xhload3d 评论(0) 有784人浏览 2018-04-02 07:30

Canvas教程:拼图,组合图像,画圆形图像,添加二维码logo,添加文字

1,创建canvas对象   // method 1 document.createElement('canvas') // method 2 <canvas id="canvas" /> document.getElementById('canvas')     2,设置大小并初始化上下文   canvas.width = 341; ...
qiaolevip 评论(0) 有4242人浏览 2018-03-30 16:15

canvas实现画板工具

花费大量时间(两周!!!!)制作了一款web端画图工具,可自由涂鸦、裁剪并移动裁剪区域位置、输入文字,包括橡皮擦、箭头工具、动作撤销/重做、保存,并通过websocket实现了画板内容同步,代码已分享,希望大家指正,同进步。          前端代码见附件huaban_v3.rar,后端websocket关键代码如下: package com.lfwer.pinche.we ...
lfwer 评论(0) 有1218人浏览 2018-03-28 18:16

快速创建 HTML5 Canvas 电信网络拓扑图

前言 电信网络拓扑图确实实用性很强,最近有个项目是基于这个的,为了写得丰富一点,还加了自动布局已经属性栏部分,不过这个 Demo 真的写得很用心,稍微改改都能直接运用到项目中去,还可以进行数据交互,总之希望能对大家有所帮助。 效果图   拓扑图 从上面的效果图中我们可以看到,整个页面分为 3 个部分,左边的 graphView 拓扑图部分,右下角的 tableView 表格部分,以 ...
xhload3d 评论(0) 有506人浏览 2018-03-21 10:45

快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇

前言 发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇,所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明,我写了一个简单的例子,基于机房工控的服务器上设备的灯闪烁现象。我们从 2d 和 3d 两个角度来分析数据绑定的问题。 效果图  2d                                                        ...
xhload3d 评论(0) 有497人浏览 2018-03-19 09:06

快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型

前言 3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板,从面板中拖动物体到右侧的 3D 场景中,当然,我鼠标拖动到的位置就是物体放置的点,但是这次我们的重点是如何在斜面上放置模型。 效果图 代码生成 创建场景 dm = new h ...
xhload3d 评论(0) 有804人浏览 2018-03-13 07:45

基于 HTML5 Canvas 的交互式地铁线路图

前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友。当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步。 效果图 http:/ ...
xhload3d 评论(1) 有1493人浏览 2018-03-05 05:59

canvas实现可跟鼠标移动的动画粒子效果

canvas实现可跟鼠标移动的动画粒子效果 <canvas id='canv'></canvas> <!-- 推荐开源CDN来选取需引用的外部JS //--> <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.m ...
青春..荒唐 评论(0) 有1477人浏览 2018-02-11 19:50

最近博客热门TAG

Java(141747) C(73651) C++(68608) SQL(64571) C#(59609) XML(59133) HTML(59043) JavaScript(54918) .net(54785) Web(54513) 工作(54116) Linux(50906) Oracle(49876) 应用服务器(43288) Spring(40812) 编程(39454) Windows(39381) JSP(37542) MySQL(37268) 数据结构(36423)

博客人气排行榜

    博客电子书下载排行

      >>浏览更多下载

      相关资讯

      相关讨论

      Global site tag (gtag.js) - Google Analytics