HTML5 Canvas编程
演示基于Canvas的图形与图像编程API应用与技巧
包括各种画笔,填充与描边,鼠标与键盘事件,动画
绘制,透明设置,简单图像处理,复杂图表数据。
gloomyfish
OpenCV开发骨灰级工程师!一间方格熬岁月,青丝半落写无相;不曾回首指尖累,神游沧海渡此生!
展开
-
HTML5 Canvas中实现绘制一个像素宽的细线
演示HTML5 Canvas中如何正确的画出一个像素宽的直线。原创 2013-07-25 23:10:05 · 22236 阅读 · 2 评论 -
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何绘制虚线以及控制虚线间隔大小,学会绘制圆角矩形的技巧原创 2013-07-17 15:33:52 · 18766 阅读 · 0 评论 -
HTML5 Canvas阴影用法演示
演示Canvas中shadow属性的设置应用与技巧。实现文字的边缘模糊效果,阴影效果3D拉影效果等原创 2013-07-16 14:43:57 · 9747 阅读 · 0 评论 -
HTML5 Canvas 填充与描边(Fill And Stroke)
演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边原创 2013-07-12 15:00:55 · 25865 阅读 · 0 评论 -
HTML5 Canvas动画效果演示
演示基于HTML5 Canvas的动画绘制技巧,实现帧播放效果。同时还是演示了物体移动的基本技巧。原创 2013-07-11 10:32:02 · 13793 阅读 · 1 评论 -
HTML5 Canvas渐进填充与透明
详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果。演示水平颜色渐进,垂直颜色渐变等颜色渐变填充方法。原创 2013-07-05 14:35:20 · 32964 阅读 · 4 评论 -
HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获在Canvas对象上的取鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动。原创 2013-07-04 14:12:04 · 57731 阅读 · 6 评论 -
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 · 28137 阅读 · 0 评论 -
提高HTML5 Canvas性能的技巧
一:是用缓存技术实现预绘制,减少重复绘制Canvs内容很多时候我们在Canvas上绘制与更新,总是会保留一些不变的内容,对于这些内容应该预先绘制缓存,而不是每次刷新。直接绘制代码如下:context.font="24px Arial";context.fillStyle="blue";context.fillText("Please press to exit game"原创 2013-07-02 15:43:35 · 8671 阅读 · 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 · 31121 阅读 · 9 评论 -
将HTML5 Canvas的内容保存为图片
主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现HTML + JavaScript的代码很简单。 window.onload = function() { draw(); var saveButton = document.getElementById("saveImageBtn"); bindBut原创 2013-05-19 21:44:01 · 84140 阅读 · 14 评论 -
HTML5 组件Canvas实现电子钟
基本思路:首先绘制一个矩形背景,设置颜色为灰色。在背景上绘制一个简单的矩形外边框,然后再绘制一个内边框,接着加载选定的图像做为电子钟内部的背景图片。然后开始绘制时钟刻度,绘制分钟刻度,最后获取当前系统时间,绘制时分秒三个手柄。 技术要点:使用HTML5的Canvas 2D绘制对象,主要使用context.save()与context.restore()方法来保存绘制状态原创 2012-02-23 22:38:00 · 5495 阅读 · 0 评论 -
HTML5 Canvas组件绘制太极图案
一实现思路:实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色和白色的圆在绘制好的黑白圆之内,半径恰好是黑白大圆一半。 最后在绘制好的两个黑白小圆内分别填充白色和黑色的点,半径大小为10pixel左右。二程序效果如下:三关原创 2012-02-03 15:37:53 · 5656 阅读 · 1 评论 -
HTML5 组件Canvas实现图像灰度化
HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死不是我要关心的,我关心的Canvas可以很轻松在网页中实现简单相框和图像灰度化。一起来看看HTML5 Canvas是怎么做到的吧!1. 新建一个html页面,在body tag之间加入Gra原创 2012-02-02 15:28:40 · 6376 阅读 · 2 评论