投稿赚佣金 
升级SVIP
html5 Canvas画图教程(1)—画图的基本常识
虽然大家都称Canvas为html5的新标签，看起来好像Canvas属于html语言的新知识，但其实Canvas画图是通过javascript来做的。所以，如果你想学习Canvas画图，你必须要有Javascript基础。 另外，画图嘛，总
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/
如果你还不知道Canvas是什么，可以看看上一篇. 在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此。 在开始之前我们先拿出画布和画笔： 复制代码代码如下: var cvs = document.ge
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
接上一篇canvas画线条教程 上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图： 这样的线条显然不是我们想要的。 这篇文章的目的就是弄清楚里面的原理，以及解决它。 大家都知道屏幕上最小的显示尺寸就是1像素
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法。 填充即fill(),很直白吧？而且和strokeStyle表示描边样式一样，fillStyle即表示填充样式。 ctx
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。 canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,qu
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
上一篇文章讲了canvas的arc方法，这一篇讲和他有关的arcTo方法。 arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ ctx.arcTo(x
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方
继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。 说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.qu
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
前面的文章我已经讲了3种在canvas中画曲线的方法：arc,arcTo以及quadraticCurveTo.他们都有一个共同点，就是他们画的曲线都只能偏向一边，今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点，即可以画
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
本文讲一下在canvas中画出矩形和圆形的办法，他们属于基础图形。当然，基础图形本来不止他们，但在canvas中，只有画矩形与圆形不需要用其他方法模拟。 canvas画矩形 1，fillRect与strokeRect fillRect可以直
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
上一篇文章我讲了画矩形和圆形的方法，他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。 一个正常的圆角矩形，我们先假设他四个角的圆角弧度一致——因为这样比较好画。我们动用把面拆成
IE9下html5初试小刀
mvc是个好东西，为什么一入行的时候不去学一下，非要等到asp.net mvc出来了才去学；orm是个好东西，干嘛非要等到EF出来了才去学；html5是个好东西，干嘛非要等到IE9出来了才去学？ ——我想自己应该改掉
html5 canvas 使用示例
代码如下: HTML5示例 #container{borde
html5时钟实现代码
代码如下: canvas{position:absolute;top:0px;left:0p
HTML5边玩边学（3）像素和颜色
一、理解颜色我们在电脑屏幕上可以看到色彩斑斓的图像，其实这些图像都是由一个个像素点组成的。那么像素是什么？颜色又是什么呢？（如果您提出这两个问题，您一定是个热爱思考的人）一个像素其实对应着内存中的一组连续的二进制位，由于是二进制位，每个位上
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
位图与矢量图 以前，浏览器中显示的图形，例如jpeg、gif等，都是位图，这些图像格式是基于光栅的。在光栅图像中，图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强，但是在某些情形下会显得不足
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
基本形状SVG提供了很多的基本形状，这些元素可以直接使用，这一点比canvas好多了。废话不说了，直接看例子，这个最直接：复制代码代码如下:
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
SVG中渲染文本SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其它插件。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SV
HTML5之SVG 2D入门5—颜色的表示及定义方式
SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性。基本有下面这些定义颜色的方式：1. 颜色名字： 直接使用颜色名字red, blue, black2. rgba/r
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
坐标系统SVG存在两套坐标系统：视窗坐标系与用户坐标系。默认情况下，用户坐标系与视窗坐标系的点是一一对应的，都为原点在视窗的左上角，x轴水平向右，y轴竖直向下；如下图所示：SVG的视窗位置一般是由CSS指定，尺寸由SVG元素的属性width
HTML5之SVG 2D入门7—SVG元素的重用与引用
前面介绍了很多的图形元素，如果很多图形本身是一样的，需要每次都去定义一个新的么？我们能否共用一些图形呢？这是这节的重点-SVG元素的重用。 组合-g元素 g元素是一种容器，它组合一组相关的图形元素成为一个整体；这样，我们就可以对这个整体进行
