Canvas
云淡风清-北京
在战争中学习如何战斗。GitHub:https://github.com/luqin
展开
-
[HTML5-SVG]使用raphaeljs:代替css3绘制opera图标效果
之前的文章:css3绘制opera图形+倒影,用css3实现兼容性并不好,opera,ie均不支持渐变。上次使用svg代替css3实现qq空间关闭按钮旋转特效,发现svg用来绘图是个不错的选择,结合raphael库实现浏览器的兼容,不支持svg的浏览器会换成vml绘制。这次用这个方案来绘制opera的图形同样实现了所有浏览器的兼容。点击观看演示 实现方法如下,首先导入raphael库原创 2013-04-17 16:13:25 · 1848 阅读 · 0 评论 -
[HTML5-Canvas] 使用HTML5 canvas完成的一个网页白板
该代码能够使用canvas对象完成的一个基本功能。仅供大家参考。 Title var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 0; var ballstyle = "." var ballcol原创 2013-04-17 16:35:36 · 6073 阅读 · 0 评论 -
[HTML5-SVG]使用raphaeljs:代替css3实现qq空间关闭按钮旋转特效
之前写过一篇文章:css3实现qq空间相册关闭按钮转圈动画,用css3实现非常简单,但是兼容性不好,只有chrome,safari5,opera11,firefox4以上才能支持,目前firefox正式版是3.6,还不支持这个效果。今天研究了一下svg,svg主要是用来绘制矢量图形,找到一个很好的解决方案,可以解决所有浏览器的兼容。点击观看演示 首先需要载入javascript库然后编原创 2013-04-17 16:10:15 · 3574 阅读 · 0 评论 -
[HTML5-Canvas] HTML5 canvas 新手入门教程
目录简述canvas 基础2D context API基本线条路径插入图像像素级操作文字阴影颜色渐变小节简述HTML5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( con原创 2013-04-17 16:33:54 · 4667 阅读 · 0 评论 -
[HTML5-Canvas] 关于HTML 5 canvas 的基础教程
canvas 元素都有一个上下文…HTML 5 规范引进了很多新特性,其中最令人期待的之一就是canvas 元素。HTML 5 canvas 提供了通过JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上原创 2013-04-17 16:40:35 · 1408 阅读 · 1 评论 -
[HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用
前言1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 HTML 发展十分迅速并具有诸多优点,但其始终不能提供一个良好的矢量绘图解决方案。很多应用为获得绚丽的动画和绘图效果,不得已在页面中嵌入大量的 Flash。这不仅降低了页面元原创 2013-04-17 16:02:10 · 6794 阅读 · 2 评论 -
[HTML5-SVG]使用raphaeljs:绘制哆啦A梦并实现动画效果
网上有人用css3实现哆啦A梦,我给他多加了个竹蜻蜓的动画,点击观看演示,兼容性并不好,只有webkit支持动画,ie下就是一堆方块。所以我想用svg技术来实现所有浏览器的兼容。先来看下演示,目前知道的是ie6,7不支持动画,但是绘图还是没有问题的,ie6,7点击观看演示 最近对svg有些研究,先是使用svg代替css3实现qq空间关闭按钮旋转特效,然后是使用svg代替css3绘制oper原创 2013-04-17 16:15:43 · 4831 阅读 · 0 评论 -
[HTML5-Canvas] HTML5 <canvas> 标签
定义和用法 标签定义图形,比如图表和其他图像。实例如何通过 canvas 元素来显示一个红色的矩形:var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);原创 2013-04-17 16:43:08 · 1105 阅读 · 1 评论