HTML Canvas 坐标体系:矩形区域的左上角为坐标原点(0,0),向右为x轴,向下为y轴. 检测浏览器是否支持Canvas(IE系列从IE9开始支持): <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/java…
这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧.下面奉上我自己写的一个demo,代码写得比较少,很多细…
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas对象 canvas对象本人也不是很熟,大致看了几个常用的方法,难免有不足之处,仅是练习所用. 实现思路:画表盘,画刻度,画表针就是这么个思路. 主要就涉及到以下几个方法 arc 创建弧/曲线(用于创建圆形或部分圆) rotate 旋转 lineTo画线 <!DOCTYPE html PUBLIC &qu…
一些概念 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM Level1规划文档结构:DOM Level2扩展了对鼠标和用户界面事件等的支持:DOM Level3支持了XML1.0特性,包括XPath等.还有其他语言发布了自己的DOM标准:可缩放矢量图形(SVG),同步多媒体集成语言(SMIL)等.DOM描述了处理网页内容的方法和接口:BOM描述了与浏览器进行交互的方法和接口. ECMAScript数据类型 5种原始类型:Undefined.Null.Boolean.Nu…
CSS3 概览 CSS3可以划分为:文字.边框模型.背景.动画等. CSS3颜色模块 CSS2.1的时候可以使用4种颜色方式,直接使用颜色名,如 redRGB值,如 rgb(0,90,255)RGB百分比,如 rgb(100%,0,0)十六进制值,如#0099ff 在CSS3中可以使用RGBA同时定义颜色和透明度,也可以使用HSLA方式来定义.HSLA方式通过色调,饱和度和亮度来调整颜色,例如hsl(128,80%,80%),hsla(128,80%,50%,0.7),IE9开始支持. CSS3…
前面两篇介绍了后台代码通过组织服务获取更新时间字段.窗体javascript通过Odata获取更新时间字段,最后篇来实验下在插件中的获取和更新时间字段是否需要时制的转化,为何说是最后篇呢,因为在CRM的开发中需要敲代码的也就这三个场景了,话不多说直接上手. 做了个简单的例子可以看到,插件中取到的也是UTC时间是需要进行8小时时制转化的. 再来看下update,从下面截图中可以看到直接将当前时间赋值是正常显示的.所以插件中的时间获取需要转化,而更新时间不需要转化.…
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这个小练习. 基本思路是这样的: 使用Canvas绘制棋盘.棋子. 用二维数组保存棋盘状态. 设置一个flag,用以标识落子顺序. 点击时,在数组中检测当前点击位置是否存在棋子,若存在,则不落子:如游戏已结束,亦不落子. 落子时,更新数组,并将当前落子所在的行.列.左上-右下列.左下-右上列四个方向的…
高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并具有转场效果.节点嵌套.分层.滤镜.缓存以及事件处理等更多功能.即使你的应用包含了成千上万的图形,也可以为你所绘制的东西添加事件监听器,或是对它们进行移动.缩放操作,为了支持高性能动画,还可以独立于其他图形对它们进行旋转. KineticJS的最新版已经更新至5.1.0,相较之前的版本,新版在增加新…
Bring Your Charts to Life with HTML5 Canvas and JavaScript Bring Your Charts to Life with HTML5 Canvas and JavaScript…
纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfishfilter.js.支持的特效滤镜分别为: 1.      反色 2.      灰色调 3.      模糊 4.      浮雕 5.      雕刻 6.      镜像 滤镜原理解释: 1.      反色:获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g,…