我们先看看粒子时钟的效果,如下:下面我们将通过canvas和js实现,首先要创建一个html文件并添加一个canvas画布,如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl ...
分类:
其他好文 时间:
2020-04-23 23:01:19
阅读次数:
61
如果您想要综合使用javascript中canvas、原生拖拽、本地存储等多种技术完成一个有趣的项目,那么这篇博文将非常适合您,水平有限,还望感兴趣的开发人员给予更多代码优化建议。 1 简介和源码 该项目中的拼图小游戏使用javascript原创,相比于网站上类似的功能,它使用到的技术点更先进丰富, ...
分类:
其他好文 时间:
2020-04-23 20:59:58
阅读次数:
59
原来用的插件,里面东西太乱了,一会jq,一会原生js,本来原生js就不熟,看起来更难受,而且感觉好多东西都是没用的,而且后端php转存文件一直不是很熟悉,正好一起整理一下。就是很简单的一个demo,如果需要复杂的功能的话需要自己添加。但是原理基本都在这了,不是很熟的时候可以拿来看看直接用。 html ...
分类:
Web程序 时间:
2020-04-23 01:03:15
阅读次数:
87
CISP 430 Data StructuresMidterm ExamSpring 2020Directions:1) This is your midterm examination; upon Canvas submission,a) you certify sole authorship o ...
分类:
其他好文 时间:
2020-04-22 19:48:02
阅读次数:
81
在现在前端圈大行其道的 React 和 Vue 中,可复用的组件可能是他们大受欢迎的原因之一, 在 HT 的产品中也有组件的概念,不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的, 也就是说如果你有过使用 Canvas 的开发经验你就可以来封装自己的组件。 下面我以一个进 ...
分类:
Web程序 时间:
2020-04-21 20:01:02
阅读次数:
90
绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图。这里将一整个绘制过程分为几个步骤: 1、 绘制网格 2、 绘制坐标系 3、 绘制点 4、 将前面三部分组合绘制一整个完整的折线图 。 一、绘制网格 运行结果 二、绘制坐标系 运行结 ...
分类:
其他好文 时间:
2020-04-19 22:07:35
阅读次数:
66
wechat-chart 基于微信小程序 Canvas API 实现的柱状图和趋势图 GitHub 地址 用法 let Line = require('../../utils/line.js'); let line = new Line(); line.draw({ renderTo: 'lineC ...
分类:
微信 时间:
2020-04-19 19:33:46
阅读次数:
122
HTML5 HTML5有哪些新特性: 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频、视频API(audio,video) 4. 画布(Canvas) API 5. 地理( ...
分类:
其他好文 时间:
2020-04-18 18:59:02
阅读次数:
83
很火的echarts底层也是采用了这个; 1. 底层是canvas画图,比较快相对于svg, 写自己类图包含hover等操作注意分层 2. canvas画布各个浏览器支持大小有限; 3. 实现画布无限大, 采用了group概念, 所有元素绑定group, 鼠标滚动计算group的position位置 ...
分类:
其他好文 时间:
2020-04-17 15:55:33
阅读次数:
297
由于时间关系 代码没有做整理大家有什么不懂得可以留言; 代码的主题思路备注中都有 大家可以看看 我的博客中还有关于canvas绘制矩形的文章有需要的可以看一下; HTML代码: 第一行的canvas为裁剪后展示用;div中的canvas存放原有尺寸的图片 <canvas id="canvasImg1 ...
分类:
其他好文 时间:
2020-04-16 00:43:26
阅读次数:
191