HTML5
关注
分享
扫一扫
文章平均质量分 87
gloomyfish
OpenCV学堂 机构创始人，OpenCV实验大师工具软件作者，OpenMV深度学习平台软件作者，OpenCV开发专家，三本OpenCV相关书籍作者，超过十年OpenCV研发经验，二十年编程经验。英特尔合作的OpenCV认证课程讲师，OpenCV中国认证课程讲师。OpenCV培训合作请站内短信！
展开
-
HTML5 Canvas组件绘制太极图案
一实现思路：实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆，首先绘制两个半圆，分别为黑色和白色，组成一个圆，绘制完成以后再分别绘制一个黑色和白色的圆在绘制好的黑白圆之内，半径恰好是黑白大圆一半。 最后在绘制好的两个黑白小圆内分别填充白色和黑色的点，半径大小为10pixel左右。二程序效果如下：三关原创 2012-02-03 15:37:53 · 5681 阅读 · 1 评论 -
HTML5 Canvas实现360度全景图
HTML5 Canvas实现购物网站360度旋转物品实景图。原创 2013-12-06 20:01:44 · 80629 阅读 · 11 评论 -
纯HTML5 Canvas实现的饼图
纯HTML5 Canvas实现的饼图，支持的功能有，标签显示或者隐藏，文字显示或者隐藏，动画载入，鼠标文字提示跟随原创 2013-08-21 23:33:34 · 18670 阅读 · 8 评论 -
HTML5 Canvas中实现绘制一个像素宽的细线
演示HTML5 Canvas中如何正确的画出一个像素宽的直线。原创 2013-07-25 23:10:05 · 22322 阅读 · 2 评论 -
HTML5 Canvas渐进填充与透明
详细解释HTML5 Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使用，结合渐进填充与透明度支持，实现图像的Mask效果。演示水平颜色渐进，垂直颜色渐变等颜色渐变填充方法。原创 2013-07-05 14:35:20 · 33338 阅读 · 4 评论 -
HTML5 Canvas平移，放缩，旋转演示
HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。平移(translate)平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y)图示如下：任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移点坐标translate(x原创 2013-07-03 17:28:41 · 28224 阅读 · 0 评论 -
HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件，获在Canvas对象上的取鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动。原创 2013-07-04 14:12:04 · 57967 阅读 · 6 评论 -
提高HTML5 Canvas性能的技巧
一：是用缓存技术实现预绘制，减少重复绘制Canvs内容很多时候我们在Canvas上绘制与更新，总是会保留一些不变的内容，对于这些内容应该预先绘制缓存，而不是每次刷新。直接绘制代码如下：context.font="24px Arial";context.fillStyle="blue";context.fillText("Please press to exit game"原创 2013-07-02 15:43:35 · 8716 阅读 · 0 评论 -
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示，如何绘制虚线以及控制虚线间隔大小，学会绘制圆角矩形的技巧原创 2013-07-17 15:33:52 · 18885 阅读 · 0 评论 -
HTML5 Canvas阴影用法演示
演示Canvas中shadow属性的设置应用与技巧。实现文字的边缘模糊效果，阴影效果3D拉影效果等原创 2013-07-16 14:43:57 · 9802 阅读 · 0 评论 -
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀，实现了六款简单常见HTML5 Canvas特效滤镜，并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js。支持的特效滤镜分别为：1. 反色2. 灰色调3. 模糊4. 浮雕5. 雕刻6. 镜像原创 2013-06-28 13:23:38 · 31657 阅读 · 9 评论 -
HTML5 Canvas 填充与描边(Fill And Stroke)
演示HTML5 Canvas Fill 与Stroke文字效果，基于Canvas如何实现纹理填充与描边原创 2013-07-12 15:00:55 · 25910 阅读 · 0 评论 -
HTML5 Canvas动画效果演示
演示基于HTML5 Canvas的动画绘制技巧，实现帧播放效果。同时还是演示了物体移动的基本技巧。原创 2013-07-11 10:32:02 · 13846 阅读 · 1 评论 -
将HTML5 Canvas的内容保存为图片
主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现HTML + JavaScript的代码很简单。 window.onload = function() { draw(); var saveButton = document.getElementById("saveImageBtn"); bindBut原创 2013-05-19 21:44:01 · 84346 阅读 · 14 评论 -
HTML5 组件Canvas实现图像灰度化
HTML5发布已经有很长一段时间了，一直以来从来没有仔细的看过，过年刚来随便看看发现HTML5中的Canvas组件功能是如此的强大，不怪很多牛人预言Flash已死，死不死不是我要关心的，我关心的Canvas可以很轻松在网页中实现简单相框和图像灰度化。一起来看看HTML5 Canvas是怎么做到的吧！1. 新建一个html页面，在body tag之间加入Gra原创 2012-02-02 15:28:40 · 6418 阅读 · 2 评论 -
ExtJS中运用HTML5 Canvas简单例子
在ExtJS的Panel组件上使用HTML5的Canvas对象画图的简单例子，效果如下：怎么运行源代码：新建两个文件，分别命名为mydemo.html, mydemo.js以后，将对应的HTML源代码与JavaScript代码copy到各自的文件中，在同一目录下使用Google Chrome浏览器或者IE9.0打开html文件即可看到效果！HTML的代码如下原创 2012-04-13 15:00:34 · 10276 阅读 · 0 评论 -
HTML5 组件Canvas实现电子钟
基本思路：首先绘制一个矩形背景，设置颜色为灰色。在背景上绘制一个简单的矩形外边框，然后再绘制一个内边框，接着加载选定的图像做为电子钟内部的背景图片。然后开始绘制时钟刻度，绘制分钟刻度，最后获取当前系统时间，绘制时分秒三个手柄。 技术要点：使用HTML5的Canvas 2D绘制对象，主要使用context.save()与context.restore()方法来保存绘制状态原创 2012-02-23 22:38:00 · 5526 阅读 · 0 评论 -
基于tomcat运行HTML5 WebSocket echo例子
一：概述作为HTML5新特性之一的WebSocket组件，在实时性有一定要求的WEB应用开发中还是有一定用武之地，高版本的IE、Chrome、FF浏览器都支持Websocket，标准的Websocket通信是基于RFC6455实现服务器端与客户端握手与消息接发的。如果对Websocket通信不是太理解，可以查看RFC文档即可，简单说就是通过发送HTTP请求，实现双方握手，将无状态的HTTP通信协议原创 2015-09-26 16:01:31 · 8964 阅读 · 5 评论