目标：利用canvas画布画一个动态时钟，根据目前的时间可以实时更新的，可以在过程中添加一些效果，比如让时钟外围的一圈颜色渐变，时钟上的数字颜色改变，时钟的指针颜色改变。。。 设置一个定时器 先放上一张效果图，参考一下 先建一个画布，写好样式 <style type="text/css"> *{ m ...
分类：
其他好文 时间：
2018-12-15 13:39:46
阅读次数：
131
canvas：什么是canvas？ canvas是使用JavaScript在网页上绘制图像 画布是一个矩形的区域，可以控制每一个像素，拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法 svg：什么是svg？ svg是指可以伸缩的矢量图像 使用xml格式定义图形，图像在放大或者改变尺寸情况下不会对... ...
分类：
其他好文 时间：
2018-12-15 11:58:17
阅读次数：
128
首先让我们分别了解一下这两个是什么： 什么是 Canvas？ Canvas 是指定了长度和宽度的矩形画布， 可使用HTML5 JS API 来画出各种图形。 不过，canvas本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务 画布是一个矩形区域，您可以控制其每一像素。 ...
分类：
其他好文 时间：
2018-12-14 21:13:53
阅读次数：
295
通过shader实现万花筒效果，shader放在文末 由右图到左图，需要去掉背景，只留车的图，并且要从正上方视角看下去的图片才可以产生左侧的效果。 shader参数： 画布比例：显示图片image的比例 图片比例：texture2d图片的比例 行数：是指再画布上显示多少行的万花筒图片 列数：是指再画 ...
分类：
其他好文 时间：
2018-12-14 12:43:39
阅读次数：
159
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
分类：
Web程序 时间：
2018-12-13 16:34:57
阅读次数：
135
此时针是以画布的中心为圆心； ctx.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,width/2) 数字的位置我们利用了三角函数的原理 x=rcosα； y=rsinα； α = 2 * π * i * 30 / 360； 利用取余把12,3,6 ...
分类：
其他好文 时间：
2018-12-12 20:40:10
阅读次数：
213
首先 搭建canvas画布格式： 动态获取画布的宽和高方便变换，利用translate将圆中心坐标改为0 0； 第一步 绘制表盘： 利用save来保存当前状态 restore返回之前保存过的状态 ，保证前后不受影响 先用画圆属性arc（）绘制一个圆圈 定义一个数组将时间刻度装起来，用for循环来循环 ...
分类：
Web程序 时间：
2018-12-12 20:36:50
阅读次数：
273
Axure作为一款热门的原型设计工具，是产品汪必备的一个技能。对于我个人来说，虽然更加喜欢墨刀这种小清新并且易用的网页版轻量级工具。 我在这里进行一些简单操作的动图，方便和我一样刚入门的同学容易看得明白。没有太多的技术含量，仅仅提供直观的操作。 文字叙述不多，都是看图说话。 1.拖动元件到画布上 2 ...
分类：
其他好文 时间：
2018-12-11 18:19:08
阅读次数：
180
https://www.chartjs.org/ canvasJS ...
分类：
其他好文 时间：
2018-12-10 22:59:58
阅读次数：
207
