摘要：
Canvas支持基本文字渲染在线基准上。只需要输入一个文字和点坐标，fillText("text", x, y) 或是strokeText("text", x, y)。文字用当前的描边或填充样式渲染，可以是颜色，渐变或者图案。你可以指定文字的设置，如font family, size, and weight, and the text alignment and baseline.例如：var bt=new Image(),pat; bt.src = 'cork.png'; bt.onload = function (e) { ... 阅读全文
摘要：
你可以添加预先绘制的图像到画布上，如果gif,jpeg,png,svg或者视频的当前帧。默认情况，这样的图片会按照它原本的大小绘制，超过了canvas的部分会被裁剪。但是，你可以指定高度和宽度在其中显示图像，或者图像绘制区域来绘制。你可以用img元素，视频元素，或其他canvas元素做图像源。如果你的image是一个html元素，通过getElementById 把它变成一个javascript对象。你也可以在javascript中创建一个图像源如new Image.本章介绍如何使用通过标签指定的图像。如果你使用gif动画做为图像源，那么只有动画的第一帧被现实，透明度是支持的。当你使用png图 阅读全文
摘要：
当你描边或者填充的时候，你用当前的描边或者填充样式。而这可以被设定为一个颜色，一个团或者是渐变。渐变渐变指定起始颜色，结束颜色，以及颜色变换的区域。一个单一的渐变包含一个以上的颜色变化。二位画布上绘图上下文支持两种渐变类型：线性 linear和径向 radial。线性渐变线性渐变定义两点之间颜色沿着一条线变化。 var grad = ctx.createLinearGradient(x1, y1, x2, y2);之后调用CanvasGradient之中唯一的方法addColorStop()来向渐变色中增加至少两个 “颜色停止点”（color stop）。该方法接受两个参数：一个是位于0～1. 阅读全文
摘要：
贝塞尔或者二次方程曲线如果我们需绘制更加复杂的曲线路径，我们或许该用到贝塞尔或者二次方程曲线。bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)quadraticCurveTo(cp1x, cp1y, x, y)两种曲线有何区别？我们可以参看下面这张图，2种曲线都有一个起点和终点（blue point），但是贝塞尔曲线仅有一个“control point”（red point），二次曲线则有2个。两个方法中的x和y参数都为曲线的终点坐标，cp1x和cp1y为第一control point的坐标，cp2x和cp2y为2次曲线的第二控制点。如果你要问起始点呢?那 阅读全文
摘要：
2d上下文对画矩形，线，曲线，弧线和圆有很多方法。1、 线，曲线和弧线能够在端点链接形成路径。路径可以闭合形成复杂的形状。2、 形状可以沿外边线描边或者是填充3、 你可以设置线和描边的厚度4、 描边和填充可以设置颜色、图案或者是渐变。设置描边和填充样式context.strokeStyle = "black";context.fillStyle = "rgba(128, 128, 128, 0.5)";线或描边的厚度默认是1，也可以通过context.lineWidth="2" 更改线宽。颜色也可以用CSS的方式如"whit 阅读全文
摘要：
canvas能做什么?canvas是HTML5中的新元素，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果你掌握了完整的命令，你可以用canvas创建丰富的web应用程序。如果你想很好的使用canvas，你首先应该很好的掌握javascript。canvas标签当然你也可以通过css来设定！如果你不设定宽高，默认宽高是300*150。对于低版本的浏览器，你把需要反馈的信息放到canvas标签之间。 你想看我，就升级浏览器吧！获取上下文，你所有的绘画操作都是在上下文，目前只支持2d。window.onad=function(){ .. 阅读全文
摘要：
前些日子还在网上争论过js动画用setTimeout还是setInterval，个人偏向于setTimeout，当动画中牵扯到ajax时用setInterval会有时间偏差，出现一些问题即使用clearInterval也失效。ok，从基础层面上，对于动画我们要先了解定时器和js的单线程。关于定时器我推荐How JavaScript Timers Work，这篇文章讲解的有深度，你会对定时器和单线程有个深入了解。我们来看下这个文章吧~~var id = setTimeout(fn, delay); - 在delay时间间隔之后，执行函数fn。该函数返回一个唯一的标志ID（Number类型），我们 阅读全文
摘要：
之前看过不少HTML5动画的书，讲解的是如何去做，对于其中的数学原理讲解的不详细，常有困惑。最近看的《HTML5+JavaScript 动画基础》这个是译本，Keith Peters曾写过《Foundation ActionScript Animation》其中的数学原理被不少人转载引用，学习过AS的对这本书应该有了解。基于此，才有的这本书，HTML5版本的动画原理。哈哈，庆幸我是数学出身的~~~ 这本书上有些bug，本来做了记录，结果被当废纸扔掉了 - -！目前不能分享，只能在看的时候再记录一遍。前段时间忙事情随笔停了，现趁春节来个年末奋斗学习！大致顺序，先理解浏览器动画原理，再熟悉canv 阅读全文