越己

摘要： 基础context.font = '50px serif';context.fillStyle = '#FF0000';context.fillText('Hello World', 100, 80);这是最基本的三行代码，第一行不写的话，默认是 10px sans-serif。关于font属性，取值参照CSS的font属性： [font style] [font weight] [font size] [font face] 比如：context.font = 'italic bold 24px serif';fillText 阅读全文

摘要： canvas的渐变分两种：线性渐变和放射渐变。线性渐变先看 fill 的例子：var gr = context.createLinearGradient(0, 0, 100, 0);gr.addColorStop(0, 'rgb(255, 0, 0)');gr.addColorStop(0.5, 'rgb(0, 255, 0)');gr.addColorStop(1, 'rgb(0, 0, 255)');context.fillStyle = gr;context.fillRect(0, 0, 100, 100);context.fillRect 阅读全文

摘要： transform这东西，应该算是canvas中一个比较高级的知识点了，别看它好像没什么东西，但很多很炫的效果，都来自于它，所以我觉得还是有必要写点东西记录一下。因为有可能在进行一连串的转换后，你自己都搞不清到底转换成什么样了，每当这时候，可以首先来一句：context.setTransform(1,0,0,1,0,0);这样就重置转换了，参数是个矩阵（别问我，我只知道大概）。需要记住两点：1. Transformations are applied to shapes and paths drawn after the setTransform() or other transformati 阅读全文