canvas

  • SVG to Canvas在线转换工具
    SVG to Canvas在线转换工具

    HTML5中有两种图形解决方案:SVG和Canvas,两者都有各自特点,这里不多说,Qunee图形组件中我们常常使用SVG作为节点图标,这在大部分场景下都表现良好,但是IE下有些小问题,IE下可以将SVG图片绘制到Canvas上,但是无法读取SVG的像素信息,这意味着一些特殊功能(追踪图片边缘,图片染色等)无法被实现,这时候我们考虑选择将SVG解析,转换成Canvas的绘制代码,这样就可以使用Canvas来绘制SVG图片了 项目地址:https://github.com/samsha/svg2c

    canvas, svg, html5, qunee, canvg.jsApril 30

  • JavaScript高级程序设计:学习笔记9--使用Canvas绘图和HTML5脚本编程
    JavaScript高级程序设计:学习笔记9--使用Canvas绘图和HTML5脚本编程

    1. 使用Canvas绘图 1. 基本用法 要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小.出现在开始和结束标签中的内容是后备信息,如果浏览器不支持就显示这些信息. 要在这块画布上绘图,需要取得绘图上下文,则需要调用getContext()方法并传入上下文的名字,例如传入"2d". 我们可以使用toDataURL()方法导出在<canvas>元素上绘制的图像.一个具体实例如下: <!DOCTYPE html&g

    canvas, JavaScript, html5January 21

  • html5之canvasAPI

    获取canvas对象 var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); 利用context来绘制canvas 属性 fillStyle 填充样式 strokeStyle 填充边框样式 lineWidth 指定线宽 globalCompositeOperation 设置图形的组合方式. shadowOffsetX 阴影的横向位移量 shado

    canvas, html5November 6

  • canvas save and restore 方法
    canvas save and restore 方法

    class CavasView extends View{ public CavasView(Context context) { super(context); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int px = getMeasuredWidth(); int py = getMeasuredHeight(); Paint bgPaint = new Paint(); bgPaint

    canvas, bitmap, Save, RestoreNovember 5

  • javafx加入特效后无法删除

    今天学习Canvas时候发现,如果加入effect效果,那么clearRect方法就删除不了了,不知道这个是不是bug~ 如果有知道如何解决,希望可以告诉我一下 代码如下: Canvas canvas = new Canvas(WSystem.WIDTH, WSystem.HEIGHT); GraphicsContext gc = canvas.getGraphicsContext2D(); gc.setFill(Color.YELLOW); BoxBlur mBlur = new BoxBlu

    canvas, javafx, Java, clear, effectOctober 27

  • 译:使用Chrome开发工具调试Canvas
    译:使用Chrome开发工具调试Canvas

    原文:http://www.html5rocks.com/en/tutorials/canvas/inspection/ 翻译:blog.qunee.com 介绍 不管你是使用2D 还是WebGL,任何用过<canvas>的人都知道很难调试,使用Canvas通常需要长长的难以跟踪的调用列表 function draw() { context.clearRect(0, 0, 258, 258); context.fillStyle = "#EEEEEE"; context.b

    canvas, Chrome, qunee, perfileOctober 19

  • 自学easeljs 根据别踩白块游戏规则自己写的代码
    自学easeljs 根据别踩白块游戏规则自己写的代码

    主要基于 -------easeljs-0.7.1.min.js----- 去制作这个游戏 思路:主要思路是以行为单位 绑定可点击行 选中则讲 移动最外层容器继续绑定可点击行的下一行 否则结束游戏 HTML页面布局 <script src="js/easeljs-0.7.1.min.js"></script> <script src="easeljs/drawZfx.js"></script> <body>

    canvas, 游戏, html5, easeljsSeptember 28

  • HTML5 canvas旋转进度加载特效

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas旋转进度加载特效</title> <style> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite

    canvas, JavaScript, html5September 14

  • 用canvas来把彩色的视频转换成黑白视频!
    用canvas来把彩色的视频转换成黑白视频!

    最近研究html5 canvas,发现html canvas可以读取视频文件里面的帧并显示. 如下面代码所示: context.drawImage(video,0,0,canvas.width,canvas.height); 于是萌生一个想法,可以用来对视频进行一些比较有趣的处理,下面是一个用canvas实现的把彩色的视频处理成黑白视频,够文艺吧.原理就是,用canvas实时读出视频的帧数据然后通过程序转换成黑白图片并实时显示在cavnas,这样用户看到的讲是一个黑白视频:),效果如下图所示:

    canvas, 视频August 21

  • ImageView背景色变暗的处理
    ImageView背景色变暗的处理

    在一些需求中,需要将ImageView的背景色变暗从而突出其他的view,类似于dialog的效果,如果仅仅是通过设置背景色的alpha是不能够达到这种效果的,如下图: 这个时候还是需要运用canvas的画图功能,可以在canvas已有的图片基础上设置画笔的alpha,绘制一个矩形蒙板就可以达到该种效果: private Bitmap getDarker(Drawable d){ BitmapDrawable drawable =(BitmapDrawable)d; Bitmap origin

    canvas, android, imageviewAugust 12

  • node与canvas保存(下载)图片

    最近在做一个截图的功能,要保存成图片. 其实这个功能挺简单的,用toDataURL()转换,或者直接用使用canvas2image.js, base64.js这两个脚本实现功能, 部分重要代码如下: //简单的使用JavaScript代码实现下载 var imageDate = document.getElementById("canvas").toDataURL("image/png"); window.location.href = "image/oc

    node, canvas, JavaScript, 图片August 11

  • 解决node在ubuntu下npm install canvas不断报错的尴尬

    项目中需要用到node中一个验证码的npm包:captchagen,此npm包依赖canvas画布npm包.执行npm install canvas时就会报错,错误代码显示文件编译失败.最终在github问答上找到答案: 问题根源是ubuntu中缺少图形开发库,一一安装上问题解决. sudo apt-get install libcario-dev; sudo apt-get install libjpeg-dev; sudo apt-get install libgif-dev; sudo a

    node, canvas, npmAugust 1

  • Pongo网页版JavaScript源代码及设计思路
    Pongo网页版JavaScript源代码及设计思路

    1.游戏背景介绍(写在前面的废话): 五月初的某天,看到某网推荐了这款游戏,Pongo,看着还不错的样子就用ipad下下来试玩了下,玩了两局感觉还错挺过瘾的,因为是手欠类游戏嘛大家懂的. 但是没一会发现游戏在ipad似乎有些bug,玩一会就会卡住然后只能强退了,真是揪心,记录还等着破呢. 怎么办?玩游戏不如玩自己的游戏的念头又邪恶的出现了,然后就把pad丢给了朋友虐心去,我默默回到电脑前开始动手自己写个不会卡的. 大概两小时吧,写出了基本框架,然后扔sinaapp里试了下效果基本能玩就洗洗睡了.

    canvas, JavaScript, 游戏, html5, 前端June 14

  • Html5 Canvas 扫雷 (IE9测试通过)
    Html5 Canvas 扫雷 (IE9测试通过)

    扫雷是一个非常经典的游戏,记得在第一次接触的windows 3.22 上就有扫雷了,到现在的Win7,依然保留着这个经典的游戏,结合Html5 Canvas,模仿Win7的UI,将老板扫雷进行了升级.在 FireFox, Chrome, 和 IE9 下测试通过. 实现中设计的类: CellInfo, MineInfo, InfoProcess, CellRender, MineArea, GameInfo, GameStatus, Game, StorageInfo, GameStorage.

    canvas, ie9, 游戏, html5, 扫雷June 11

  • canvas探索之旅
    canvas探索之旅

    说到HTML5,canvas可以说是几个热点之一.之前我也在书上看过,只是画圆画方,那时候真心觉得不知道拿来干嘛.不过今天闲着无聊,看到getImageData这个方法.原来canvas还能干这种事,看来以前的我真是弱爆了,没有深入的了解,就觉得canvas没啥用. 在这里,我就不介绍canvas的基础的,现在整个web好多canvas的基础知识,不了解的自己可以百X,谷X下. 先看看我今天都捣鼓了什么,其实就是简单的把2张图片融合在一起了而已 其实实现这东西并没有什么好说的,直接贴代码,代码里

    canvas, JavaScript, 图片April 29

  • Canvas 绘图
    Canvas 绘图

    在最近的项目中有好几个地方都用到了自定义的ProgressBar 分享并记录一下: 先介绍一下Canva.Paint.RectXX. Bitmap.Drawable之间的关系: Canvas:封装了多种绘图所用的方法,他就相当于一个图形画法的集合,你需要画什么图形调用相应的drawXXX()方法就可以实现.他除了封装了画图方法还封装了对图片进行裁剪的clipXXX()方法. Paint:现在有了画图的方法集合,也就是有了画图的技术说明,那怎么去实际去画这个图呢?现在就需要一个大师傅进行操刀进行画

    canvas, paint, bitmap, 自定义控件April 27

  • 使用HTML5技术绘制思维导图
    使用HTML5技术绘制思维导图

    客户常常提到思维导图,喜欢它的结构展示方式,和交互的友好,从图论的角度看,思维导图本质上是一种树,有一个根节点(主题)出发,联想到其他话题,于是分支开花,再分支,有时候也会构成网络结构,由子分支联想到另一个已有分支,但通常不破坏原有结构,常见的思维导图如下 XMind制作的思维导图 使用HTML5制作思维导图应用 这里需要用到一款HTML5图形组件-Qunee for HTML5,Qunee组件本身支持树形布局,所以对于思维导图的大体结构是可以呈现的,到细节的地方就比较多了,包括线条的走向,节点

    canvas, html5, 思维导图, xmind, quneeMarch 25

  • 基于HTML5技术绘制上海地铁图
    基于HTML5技术绘制上海地铁图

    某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下: 示例讲解 首先需要解决数据问题,可以从维基百科或者上海地铁官网中获取,不过也免不了人工,要达到良好的显示效果,需要不只要记录站点的位置,还需要设置文本标签的理想位置,有时为了避免文字叠加,需要设置旋转角度--总之事在人为,想想办法,最终解决了数据问题,再加上Qunee图形组件的强大展示效果,做出来可以交互的在线地铁图 数据格式 采用JSON格式

    canvas, html5, qunee, 地铁图, 图形组件March 25

  • HTML5 Canvas效率如何?
    HTML5 Canvas效率如何?

    js运行效率在提升 编程语言的效率是前提,js自然比不上native的C语言效率,所以Canvas效率无疑比不上原生的2D图形绘制,但是js效率的提升是有目共睹的,以js与as为例,基本操作(运算操作,集合操作,Map操作)已经超越ActionScript,尤其是Google Chrome浏览器与as拉开了不小的距离,甚至某些方面超过java. Canvas绘制效率不低 Canvas没有dom操作,只是简单的2D绘制,所以效率不低,Chrome浏览器下,每秒可绘制五万个基本图形元素(圆形,矩形或

    canvas, svg, KineticJS, quneeMarch 25

  • Web开发中的矢量绘图(vml,svg)处理和应用
    Web开发中的矢量绘图(vml,svg)处理和应用

    前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档.经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式.虽然 HTML 发展十分迅速并具有诸多优点,但其始终不能提供一个良好的矢量绘图解决方案.很多应用为获得绚丽的动画和绘图效果,不得已在页面中嵌入大量的 Flash.这不仅降低了页面元素的交互性,大量的 Flash 同时严重影像了页面性能,更加头疼的是 Flash 内容不能被搜索引擎搜索.虽然

    canvas, svg, html5, 矢量图, web矢量图February 25

  • html5学习笔记(系列4)

    参照w3cschool中的示例 ,根据文章中的代码编写的网页是不能在canvas中显示图像的,原代码 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script

    canvas, drawimage, OnLoad, ImageJanuary 28

  • Html5 canvas 位图像素处理getImageData和putImageData
    Html5 canvas 位图像素处理getImageData和putImageData

    getImageData(int x,int y,int width,int height):该方法获取canvas上从(x,y)点开始,宽为width.高为height的图片区域的数据,该方法返回的是一个CanvasPixelArray对象,该对象具有width.height.data等属性.data属性为一个数组,该数组每4个元素对应一个像素点. putImageData(CanvasPixelArray data,int x,int y):将data里的数据放到canvas中从(x,y)点

    canvas, html5, 像素January 6

  • Three.js / DOC (一) 创建一个场景

    Three.js / DOC Manual 创建一个场景 本节的目标是对Three.js作一个简单的介绍.我们将从设立一个场景开始,用一个旋转的立方体.示例见下文. 什么是Three.js? 如果你正在读这篇文章,你可能对Three.js有一定的了解,那我们来简单地介绍下Three.js是什么. Three.js是一个库,使得WebGL的3D效果在浏览器中运用很容易.而在原始的WebGL中一个简单的立方体会变成数百Javascript和着色器代码的行,而一个Three.js只需要一点点代码. 在

    canvas, JavaScript, html5, WebGl, three.jsDecember 20

  • HTML5适合做些什么?
    HTML5适合做些什么?

    HTML5技术而今已不再陌生,不管是趋之若鹜,热情拥抱,还是远远张望,保持距离,HTML5都是技术论坛热门的话题,给人的感觉就是酷.新.看上去很美 任何技术都有他的适用范围,HTML5技术是一种被夸大了的万金油,在目前浏览器支持不一,开发工具,第三方类库缺乏的情况下,HTML5无法解决一切问题,但如果限定它的使用范围,HTML5确实可以优雅的解决很多问题 HTML5是什么? 侠义的HTML5 侠义的HTML5指HTML下一个主要的修订版本,是W3C制定的标准,目前还在发展中,在HTML 4.01

    canvas, svg, JavaScript, html5, flashDecember 16

  • Canvas: trying to use a recycled bitmap的处理

    (转载)http://zwnjava.iteye.com/blog/1901880 在做Android的开发的时候,在ListView 或是 GridView中需要加载大量的图片,为了避免加载过多的图片引起OutOfMemory错误,设置了一个图片缓存列表 Map<String, SoftReference<Bitmap>> imageCache , 并对其进行维护,在图片加载到一定数量的时候,就手动回收掉之前加载图片的bitmap,此时就引起了如下错误: 解决方法(继承Image

    canvas, bitmap, use, trying, recycledNovember 14

  • 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = 'http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg'; canvas.width = img.width; canvas.height = img.height; var context =

    canvas, html5, 滤镜, 图像滤镜, 灰度滤镜November 4

  • 用canvas实现图片滤镜效果
    用canvas实现图片滤镜效果

    1.灰度效果 图片过滤效果之灰度效果 算法及原理: .299 * r + .587 * g + .114 * b; 2.油画效果 算法及原理: 用当前点四周一定范围内任意一点的颜色来替代当前点颜色,最常用的是随机的采用相邻点进行替代. 3.连环画效果 图片滤镜效果之连环画效果 算法及原理: 连环画的效果与图像灰度化后的效果相似,它们都是灰度图,但连环画增大了图像的对比度,使整体明暗效果更强. 算法: R = |g – b + g + r| * r / 256 G = |b – g + b + r

    canvas, 图片, html5, 滤镜October 30

  • 关于Android自由拼图的demo

    关于自由拼图的软件有很多,像美图秀秀之类的.前不久,遇到了实现自由拼图的比较好的方法,就写下此篇文章记录一下. 实现拼图的方式有很多,但都离不开三样东西:画布(canvas),矩阵(Matrix),绘图资源(drawable). canvas:个人觉的canvas(http://developer.android.com/reference/android/graphics/Canvas.html)与现实中的画布的功能还是不一样的,现实中的画布只是提供了绘图的平面,而canvas还定义了绘图的规

    canvas, android, 拼图September 2

  • Canvas画钟
    Canvas画钟

    效果图: canvas代码: <body> <canvas id="clock" width="500" height="500"> 您的破浏览器不支持canvas标签. </canvas> </body> javascript代码: <script> var clock=document.getElementById('clock'); var cxt=clock.getContext

    canvasAugust 31

  • 整理的HTML5 CANVAS 定义.属性和方法

    最近开始接触HTML5,网上整理一些canvas的资料,加强学习了解! 当你创建一个<canvas>元素后,就拥有了它的绘图上下文. 一.简单图形 1.getContext()方法 为了在canvas上绘制,你必须先得到一个画布上下文对象的引用,用本方法即可完成这一操作,格式如下: context = canvas . getContext(contextId)方法返回一个指定contextId的上下文对象,如果指定的id不被支持,则返回null,当前唯一被强制必须支持的是"2d&q

    canvas, html5August 4

  • 使用HTML5的Canvas画布来剪裁用户头像
    使用HTML5的Canvas画布来剪裁用户头像

    日期:2013-5-23 来源:GBin1.com 本文来自极客标签社区用户webgeek的一个在线HTML5web开发小技巧,帮助你使用html5的画布功能来切割用户上传的大头照. 在线调试 例如需要剪裁的图片如下: 用来处理大头照的JS代码如下: var canvas = document.getElementById('myavatar'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageOb

    canvas, html5, 分享May 23

  • 提高HTML5 canvas性能的几种方法!
    提高HTML5 canvas性能的几种方法!

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2D immediate mode graphic)的标准.许多开发者现在利用它来实现众多的多媒体项目.可视化醒目以及游戏等等.然而,随着我们构建的应用程序的复杂度的增加,我们难免会遇到所谓的性能问题. 已经存在众多优化canvas性能的方法了,但是还没有一篇文章将这些方法系统的整理并加以分析.本文的目的就在于将这些方法整理.巩固以使其曾为开发者们更容易理解.消化.吸收的

    canvas, 优化, html5, 测试, 性能May 21

  • html5 画面Canvas 005
    html5 画面Canvas 005

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: <canvas id="myCanvas" width="200" height="100"></canv

    canvas, html5May 17

  • 基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine
    基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine

    日期:2013-5-5 来源:GBin1.com 随着HTML5的发展,越来越多的基于HTML5技术的网页开发框架出现,在今天的这篇文章中,我们将介绍iio Engine,它是一款开源的创建HTML5应用的web框架. 整个框架非常的轻量级,只有45kb大小,并且整合了debug系统,并且跨平台支持. 不依赖任何第三方的类库,可以支持Box2D,拥有完整的文档支持.支持快速的开发. 使用这个类库你只需要使用10多行的代码就生成一个tic-tac的游戏,代码如下: TicTacToe = func

    canvas, html5, 分享, 前端框架May 5

  • android 涂鸦(清屏,画笔,粗细,保存)以及canvas源码学习
    android 涂鸦(清屏,画笔,粗细,保存)以及canvas源码学习

    更新:本文的内容只是一部分,这段时间添加了橡皮擦这个新功能,于是问题接二连三的来,比如说:如果用本文的内容去做橡皮擦的话,难!(至少我没解决,不是没背景图,就是有背景图但是更新要在下一下刷橡皮擦的时候才能更新效果),然后有个setbackgroundresource的函数,这个函数就可以了,但是问题又来了,比如说保存,清屏,但是我都解决了(清屏的话就是重新构造一个图,当clear的时候就把这张图赋值给以前的图片.保存的话我就是把绘下个图放到一张有背景的canvas上面,至是分辨率的问题自己去解决

    canvas, 源代码, 涂鸦, 清屏April 16

  • Literally "Canvas"- 开源的HTML5画图组件

    Literally Canvas 是一个开源的HTML5组件,可以集成到任何页面中,让用户可以在线画图. 它配备了一组简单的工具,包括绘制,擦除,颜色选择器,撤消,重做,平移和缩放. 插件采用jQuery + Underscore.js开发,并拥有一个API来背景颜色,工具和尺寸. 此外,可以将绘制后的结果导出成图片. 项目地址: http://literallycanvas.com/ 下载地址: https://github.com/literallycanvas/literallycanva

    canvas, html5, 画图组件December 10

  • HTML5 Video/Canvas拍照初级

    通过HTML5 Video和Canvas实现拍照的功能,功能很简单:另外,因为用到了getUserMedia()函数,目前只能在Chrome和Opera里使用,详见:Can I use getUserMedia/Stream API? 演示地址:HTML5 Webcam Photoing 基本原理:<video>元素用来从WebRTC(亦即你的摄像头)获取图像,然后通过<canvas>来抓取视频: (function() { var streaming = false, video

    canvas, webcam, html5, VideoOctober 30

  • 自定义控件 –百科专家总结(最后遗留了问题望网友能帮忙解答)

    在开发android应用中 经常用到自定义控件 我 就将这段时间 我参与的项目中用到的自定义控件说一下 在百科专家中用到最多的就是 text描边 这是我参考的文章 http://labs.ywlx.net/?p=2739 http://labs.ywlx.net/?p=1260 我以前 也写了篇文章 讲述的时在surfaceview 中对字体的描边 不过后来仔细研究了下 不怎么合适 http://labs.ywlx.net/?p=2749 在百科专家中我 总结了以上文章自己写了个自定义的控件方便

    canvas, textview, 自定义控件October 30

  • HTML5 Canvas Writing/Painting初级

    通过HTML5 Canvas实现Writing/Paiting的功能,可选择笔触颜色.大小,目前只能在PC端运作,TOUCH功能后续增进:整体比较简单,不过还是学到不少东西. 演示地址:HTML5 Canvas Writing/Paiting 如果大伙有其他的相关建议也可以提出哈,多谢! var canvas; var context; var paint; var canvasWidth = 800; var canvasHeight = 420; var lineWidth = 8; var

    canvas, painting, html5October 29

  • android Immutable bitmap passed to Canvas const...

    今天使用bitmap直接加载sdcard里面的图片,报了如下错误: 09-10 09:09:23.593: E/AndroidRuntime(11204): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.czld/com.czld.activity.OneLayoutActivity}: java.lang.IllegalStateException: Immutable bitmap passed

    canvas, android, bitmap, 加载, Immutable, passed, constructor异常September 10

  • 分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件
    分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

    日期:2012-7-14 来源:GBin1.com jQuery插件开发绝对是jQuery框架最强大的一个特性.数以万计的开发人员开发了各种不同功能和特性的jQuery插件,使得jQuery框架如此的成功和流行.随着HTML5,CSS3的发展,javascript在web开发中慢慢变得更加强大,并且更加的可控.在今天的这篇文章中,我们将介绍10款帮助你构建完美UI,特效和动画的jQuery插件.希望大家能够喜欢! Percentage loader 在我们以前的文章中我们介绍过这个canvas实

    canvas, jquery, svg, css3, jQuery插件, pluginJuly 19

  • CSS+Canvas实现图片灰度效果,兼容所有浏览器

    昨天研究了一下利用CSS实现图片灰度效果,利用IE的滤镜和CSS3的滤镜效果可以轻松实现,但IE滤镜只支持IE家族浏览器,而CSS3的滤镜效果目前只有Google Chrome浏览器支持,那其他 Opera.Safari浏览器怎么办呢,不管他?不能做到全兼容的前端不是一个好前端,于是昨晚在网上搜了一遍,终于找到了兼容Opera.Safari浏览器的方式.实现的原理就是利用HTML5的画布功能来实现图片的灰度效果.闲话少说,先上代码: <!doctype html> <html> &

    canvas, 画布, css滤镜, CSS灰度, grayJuly 6

  • 分享一个Javascript的keyframe动画类库 - Rekapi
    分享一个Javascript的keyframe动画类库 - Rekapi

    日期:2012-6-23 来源:GBin1.com 在线演示 在线调试 今天我们带给大家一个javascript的keyframe动画类库 - Rekapi,使用这个类库你可以方便的构建基于<canvas>和DOM的动画效果. 什么是keyframe? keyframe是一个使用指定时间点来定义状态的动画技巧.动画都被渲染成frame来显示到屏幕,keyframe允许你定义关键的点来支持动画变化动作. 主要特性 基于俩个js类库Underscore和Shifty 支持浏览器:IE7/8/9,现

    canvas, css3, 动画, rekapiJune 25

  • HTML5 打地鼠
    HTML5 打地鼠

    上周的那篇HTML5时钟竟然被推荐为热门博客,真是让我受宠若惊啊.一直想用HTML5做个小游戏,但总是没有时间,今天抽了几个小时做了个打地鼠的小游戏,体验一下HTML5上的游戏开发.本着OSC的分享精神,特分享出来.没有花时间去找更多的素材,再加上本来就不怎么会做图,出了那个地洞的素材以外其他的全是从网上搜到的.代码也比较混乱,大家就凑合着看看吧,欢迎大家批评指正,也欢迎大家能把这个小游戏做的更完善些. 废话不说了,大家先看看效果吧: HTML文件: <!DOCTYPE html> <h

    canvas, 游戏, html5, 打地鼠March 11

  • 心情不好,用HTML5做个时钟
    心情不好,用HTML5做个时钟

    心情不好,游戏不想玩,弄个小东西排解一下心中的不畅: 本时钟是通过HTML5的Canvas实现的,相关的技术大家可以到这儿去看看: 链接地址 下面就没有什么好所的了,上面的链接中有详细的说明,有图有真相 -- 下面是代码: <html> <head> <title>HTML5 Test</title> <script type="application/x-javascript"> var panel, ctx, img; v

    canvas, 时钟, htm5March 4

  • 利用canvas把一段文字生成为图片

    function makeImage(str,width,author) { width = width || 450; author = author || "____′↘夏悸"; var canvas = document.createElement("canvas"); canvas.width = width; var ctx = canvas.getContext("2d"); var strLenght = str.length; v

    canvas, godson, html5, 文字图片February 26

  • 利用canvas合并图片

    function merger(imgs,maxWidth){ if(!imgs) return null; maxWidth = maxWidth || 500; var height = 0; for (var i = 0; i < imgs.length; i++) { var img = imgs[i]; if (img.width > maxWidth) { height += img.height * (maxWidth / img.width); continue; } heig

    canvas, godson, html5, 图片合并February 26

  • 动态设置canvas的尺寸

    canvas的大小不能通过设置style的宽高值来实现 , 这样只能使canvas拉伸来设定值 . 以下方式是错误的 $("canvas").eq(0).css({"width":w,"height",h}); //或者 $("canvas").eq(0).width(w);$("canvas").eq(0).height(h); //或者 $("canvas").eq(0).style

    canvas, JavaScriptDecember 19

  • C# canvas 添加图片

    添加图片示例代码: private static string imageFilesPath = Directory.GetCurrentDirectory() + "\\images\\"; image = Image.FromFile(imageFilesPath + fileName + "_" + dirName + ".gif"); Image image = new Image(); using (MemoryStream memor

    canvas, ImageDecember 4