html5提供了一个<canvas>标签，结合javascript的canvas api接口可以用来绘制图形和动画。最近工作中涉及到画图的任务，下面来了解一下canvas的基础：canvas画布。 1，canvas（画布）的width和height 上面的代码中放置了两个canvas画布，一副图片， ...
分类：
其他好文 时间：
2017-07-01 15:29:16
阅读次数：
167
效果图 1.做出canvas画布和声明一个用来存储雨滴的数组 2.将雨滴的位置、大小得到 由于最后所有的东西都需要用setinterval包起来，所以这里的变量只能用做局部变量，不能用全局声明。 3.将生成的雨滴存到数组 冒号前为键名，冒号后为之前声明的变量，用作键值，fun里是在画布上生成雨滴，最 ...
分类：
编程语言 时间：
2017-07-01 00:06:31
阅读次数：
227
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载，但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制，其实现原理大体是浏览器端收集SVG代码信息，并发送到到服务器端，由后端程序转换成图片格式后，以流的形式反射给浏览器端下载。 最近在项目中 ...
分类：
Web程序 时间：
2017-06-28 18:41:52
阅读次数：
211
context是一个封装了很多绘图功能的对象。不支持低版本的IE。 思路是获取到时分秒渲染到页面 创建画布路径 画布的时间刻度 因为每次都会更新新的时间，需要清除画布 cxt.clearRect(0,0,500,500); 创建一个函数 定时器让画布每秒动一次 setInterval(drawClo ...
分类：
其他好文 时间：
2017-06-23 22:59:49
阅读次数：
269
我们的图片大部分都是可以转换成base64编码的data：image。 这个在将canvas保存为img的时候尤其有用。虽然除ie外，大部分现代浏览器都已经支持原生的基于base64的encode和decode，例如btoa和atob。（将canvas画布保存成img并强制改变mimetype进行下 ...
分类：
其他好文 时间：
2017-06-15 10:36:57
阅读次数：
297
canvas 使用 <canvas> 元素不是非常难但你需要一些基本的HTML和JavaScript知识。<canvas> 元素不被一些老的浏览器所支持，但是所有的主流浏览器的新近版本都支持。Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，可以使用HTML的高度和 ...
分类：
其他好文 时间：
2017-06-13 23:54:11
阅读次数：
221
上一章内容中我们对canvas元素有了一个初步的认识，在接下来的章节中我们会慢慢学习canvas中图形的绘制；但是在绘制之前我们先来看看canvas中的坐标系统，因为这样我们才能知道绘制的图形放在什么位置。 比如：我们要在canvas画布的（100，100）这个位置绘制一个圆 看到这个要求顿时就懵逼 ...
分类：
其他好文 时间：
2017-06-13 11:21:33
阅读次数：
277
<!DOCTYPE html5><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-Canvas画布（文本）</title> <script> window.onload=function () { var canvas=documen ...
分类：
Web程序 时间：
2017-06-08 21:37:39
阅读次数：
209
<!DOCTYPE html5><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-Canvas画布（图形-三角形）</title> <script> window.onload=function () { var canvas=doc ...
分类：
Web程序 时间：
2017-06-08 21:31:47
阅读次数：
255
<!DOCTYPE html5><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-Canvas画布（渐变）</title> <script> window.onload=function () { var canvas=documen ...
分类：
Web程序 时间：
2017-06-08 21:27:20
阅读次数：
182
