博客首页 → canvas

最新文章列表

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

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

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

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

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

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

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

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

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

本文适合适合对canvas绘制、图形学、前端可视化感兴趣的读者阅读。 楔子 所有的事情都会有一个起因。最近产品上需要做一个这样的功能：给一些 ...
canvas
flyfox1982 评论(0) 有691人浏览 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 ...
canvas 
flyfox1982 评论(0) 有592人浏览 2019-02-15 11:37

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

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

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

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

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

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

canvas的使用

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

canvas绘制圆形钟表

【前言】    分享个特效，canvas绘制圆形钟表    先看下效果 【主体】 <canvas width="200px" height="200px" id="clock"></canvas>   var dom = document.getElementById("clock&quo ...
canvas常见特效 
青春..荒唐 评论(0) 有771人浏览 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 ...
乔乐共享众观千象每天进步一点点学习永无止境Canvas
qiaolevip 评论(0) 有8485人浏览 2018-04-10 10:58

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

前言 文字是网页中最基本的元素，一般我们在网页上都是展示的静态文字，但是就效果来说，还是比较枯燥的。文字淡入淡出的动画效果在项目中非 ...
html5canvasscada电信网管工控
xhload3d 评论(0) 有720人浏览 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; ...
乔乐共享众观千象每天进步一点点学习永无止境Canvas
qiaolevip 评论(0) 有4151人浏览 2018-03-30 16:15

canvas实现画板工具

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

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

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

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

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

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

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

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

前言 前两天在 echarts 上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo，地铁线路上的点是在网上随便下载了一个，这篇文章记录自己的一些收获（毕竟我还是个菜鸟）以及代码的实现，希望能够帮到一些朋友。当然，如果有什么意见的可以直接跟我说，大家一起交流才会进步。 效果图 http:/ ...
html5canvasscada工控电信网管 
xhload3d 评论(1) 有1432人浏览 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 ...
canvas常见特效 
青春..荒唐 评论(0) 有1380人浏览 2018-02-11 19:50

最近博客热门TAG

Java(141744) C(73651) C++(68608) SQL(64571) C#(59609) XML(59133) HTML(59043) JavaScript(54919) .net(54785) Web(54514) 工作(54118) Linux(50905) Oracle(49875) 应用服务器(43289) Spring(40812) 编程(39454) Windows(39381) JSP(37542) MySQL(37267) 数据结构(36424)

博客人气排行榜

    博客电子书下载排行

      >>浏览更多下载

      相关资讯

      相关讨论

      Global site tag (gtag.js) - Google Analytics