随笔分类 -  HTML5 / CSS3

平滑多条曲线
摘要：Canvas 画曲线（非圆弧）有两个方法： 1.quadraticCurveTo(cpx, cpy, x, y) 2. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)本文只讲quadraticCurveTo()，先来看如何画一条曲线。我们需要曲线的 开始点(p0) 和 结束点(p1)，外加一个控制点(pc)，虽然说有3个点，但实际画图时，我们关心的只是开始点和结束点可以看到曲线经过 p0 和 p1 两个点，控制点pc 只是用来调整曲线的形状的。如果曲线要经过3个点呢？不好做了吧？这里介绍一个公式，从上图可知，曲线不经过控制点，但曲线肯定会经过某个点，.. 阅读全文
posted @ 2012-02-18 15:47 越己 阅读(1811) 评论(1) 推荐(1) 编辑
仿as3的displaylist
摘要：AS3有显示列表这个东西，这东西可以理解为一个数组，管理着舞台上n多的的显示对象。以Canvas来说，首先是没有显示对象的概念的，因为一个canvas就是一个显示对象，再没有更细分的概念了，于是在canvas中，舞台可以和显示对象划等号。下面我就用js模拟显示列表，以便更好的管理“显示对象”，实现可读性更好的代码。var displayList = [];接着，每次画一个对象，就把它加入数组，顺序一定要保证是对的，因为后画的会覆盖先画的，不然层叠效果就错了。那么我们怎么用它呢？虽然我不知道flash底层是怎么用显示列表的，我猜大概是遍历它，然后一个个的渲染，每一帧都这么来一下。所以我们需要为每 阅读全文
posted @ 2012-02-15 11:20 越己 阅读(256) 评论(0) 推荐(0) 编辑
直线运动
摘要：今天看到一种新的直线运动方法，和我之前一直用的稍有不同，因此记录一下。假设有两个点p1和p2，如下：var p1 = {x: 10, y: 10}, p2 = {x: 100, y: 100};现在要从p1运动到p2，这种程序一般需要定义一个运动速度：var speed = 1;假设运动的物体是个小球，那么这个小球就以每帧1px的速度从p1运动到p2。var ball = {x: 10, y: 10};按照OO的思想，speed应该是ball这个对象的属性，好了，现在小球有 x, y, speed 这三个属性，但是这也不能确定小球的运动，因为还差运动方向呢！这里介绍“速度向量”的概念，想必大家 阅读全文
posted @ 2012-02-14 22:11 越己 阅读(324) 评论(0) 推荐(0) 编辑
Canvas Bitmap
摘要：图片源两种方式：1.<img id="xxx" src="xxx" />2.var img = new Image();img.src = "xxx";加载如果想在代码里使用图片，我们必须确保图片加载完了，如下：img.addEventListener('load', imageLoaded, false);这种为每张图片创建一个事件侦听器的方式效率上不太好，如果只是一张图片倒是没什么问题。drawImagedrawImage() 方法被重载了，它有三个版本，下面我按需求进行分解：现有一张100 * 100 阅读全文
posted @ 2012-02-11 23:34 越己 阅读(1379) 评论(0) 推荐(0) 编辑
Canvas Text
摘要：基础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 阅读全文
posted @ 2012-02-10 17:55 越己 阅读(3610) 评论(0) 推荐(0) 编辑
Canvas Gradient
摘要：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 阅读全文
posted @ 2012-02-10 12:57 越己 阅读(643) 评论(0) 推荐(0) 编辑
Canvas Transform
摘要：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 阅读全文
posted @ 2012-02-10 00:29 越己 阅读(2232) 评论(0) 推荐(0) 编辑
Canvas Demo 1
摘要：先看图：这个例子有三个个细节，请细看第一个path：1. 横线的lineCap不是round，而竖线是round2. 竖线比横线粗一倍3. lineJoin是个直角（也许你不觉得这是什么问题，继续往下看吧）关键的处理在于moveTo(x, y)：1. 只要保证x是0，横线的lineCap就是butt。如果移到(50, 50)，那两条线都是round了2. 只要保证y是0，竖线就会比横线粗一倍，因为lineWidth属性是以绘制的像素线为中心线的，比如从(0,10)画到(10, 10)，这条线就是中心线（不计粗细），如果lineWidth为10，那就上下各分得5px。例子中第一个path的横线y 阅读全文
posted @ 2012-02-09 21:02 越己 阅读(384) 评论(0) 推荐(0) 编辑
文字特效
摘要：本文仅作抛砖引玉，实现一个文字凸起效果，因为我特别喜欢这种效果。首先，需要一个很粗的大号字体很自然想到font-weight: bold/bolder，但是你会发现，就算写成font-weight:900，也没多粗。那么大号字体怎么做呢，那就font-size吧font-family:'微软雅黑';font-weight:900;font-size:100px;貌似加粗还不如加大给力，先这样吧，懒得删了接着调下颜色，例子中是#99999最后是阴影效果，为了看的明显，这次换个背景色，因为阴影多是黑白形成的，背景就用浅蓝色。font-family:'微软雅黑';fo 阅读全文
posted @ 2011-10-02 16:56 越己 阅读(287) 评论(1) 推荐(0) 编辑
CSS3技巧 —— 渐变
摘要：CSS渐变在Webkit率先得到实现，现在Firefox 3.6+也支持了，来看下各个浏览器如何实现CSS渐变效果。Webkit下面这行代码可用于Chrome, Safari等，它能实现线性渐变，从top(#ccc)渐变到bottom(#000)。background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));Firefox 3.6+background: -moz-linear-gradient(top, #ccc, #000);IEIE这个垃圾需要使用滤镜filter: progid:D.. 阅读全文
posted @ 2011-10-01 15:11 越己 阅读(489) 评论(3) 推荐(0) 编辑
CSS3技巧 —— 搜索框
摘要：这种类型的搜索框应该较为常见，设计元素有圆角和内阴影，在CSS2时期通常都是用图片实现的，来看下CSS3的效果，而对于IE6,7这样的悲剧浏览器，也不至于太难看:画圆通过设置一个较大的圆角值就能实现圆形，下面画了一个直径为100的圆。.circle { width: 100px; height: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;}内阴影效果box-shadow的第一个值是阴影类型，默认是外阴影，平常我们使用它都不会设置这个值，所以就是外阴影的效果。如果要实现内阴影效果，需要手动设值：inner 。.i 阅读全文
posted @ 2011-10-01 13:51 越己 阅读(1816) 评论(1) 推荐(2) 编辑
CSS3基础
摘要：RGBA前三个值是RGB颜色，最后一个表示透明度（0 = 全透明，1 = 不透明）RGBA可以应用于任何和颜色相关的属性,比如font color, border color, background color, shadow color等等。文字阴影text shadow的结构顺序是这样的：x-offset，y-offset，blur和color如果x-offset是负数，阴影会移到左边。如果y-offset是负数，阴影会移到上面。别忘了，shadow color是可以使用GRBA的哦！你可以设置多个text-shadow，用逗号分隔开就行了。下面的例子使用了两个text-shadow，实现 阅读全文
posted @ 2011-10-01 13:02 越己 阅读(356) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示