摘要: 绘制带阴影效果的图形 在canvas上绘制带阴影效果的图形只需设置shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor属性。 shadowOffsetX,shadowOffsetY表示阴影的x,y偏移量单位像素;可以使用负值,正负偏移方向不同。shad 阅读全文
posted @ 2016-07-14 12:44 云想默默 阅读(296) 评论(0) 推荐(1) 编辑
摘要: 绘制组合效果的图形 将一个图形绘制在另一个图形之上,图形效果会受制于图形的绘制顺序,可利用globalCompositeOperation属性组合图形,前面绘制贝塞尔曲线时,我就已经用过这个属性了,绘制了多条凡尔赛曲线,组合成了一个图形。利用globalCompositeOperation属性在已有 阅读全文
posted @ 2016-07-14 12:25 云想默默 阅读(1003) 评论(0) 推荐(1) 编辑
摘要: canvas可以使用moveTo来移动画笔,同时也可以使用变换来调整画笔下的画布,变换的方法包括旋转、平移和缩放,绘制图形很方便。 绘制平移效果的图形 实现图形的平移用translate(x,y)方法,如,原来在(100,100),translate(1,1),则新坐标原点在(101,101). 绘 阅读全文
posted @ 2016-07-14 10:02 云想默默 阅读(383) 评论(0) 推荐(0) 编辑
摘要: 绘制线性渐变 step1 创建渐变对象:var gradient=cxt.createLinearGradient(x0,y0,x1,y1);沿直线从(x0,y0)到(x1,y1)渐变;step2 为渐变对象设置颜色,指明过渡方式:gradient.addColorStop(0,'#fff');gr 阅读全文
posted @ 2016-07-14 09:48 云想默默 阅读(1480) 评论(0) 推荐(0) 编辑
摘要: canvas标签是一个矩形区域,它包含两个属性,width和height,默认为300px和150px. 常用形式如下: 也可写成形式如: 可是我在运行时发现第二个写法会导致<canvas>之后的元素无法在浏览器中显示出来. 在body中将canvas放好后,就可以使用JavaScript在网页上绘 阅读全文
posted @ 2016-07-14 09:34 云想默默 阅读(648) 评论(0) 推荐(0) 编辑
摘要: 今天看以前写的网页设计作业,看见要将图片作为项目标记显示,而我居然使用的是背景图片插入完成了这一效果,觉得我当时的脑回路也是蛮神奇的,现在总结实现的方法,也让自己加深印象吧! 实现效果: 方法一:自然是使用list-style-image属性 #mainContent>li{ list-style- 阅读全文
posted @ 2016-07-10 21:47 云想默默 阅读(1500) 评论(0) 推荐(0) 编辑
摘要: 这个假期开始进行web前端的深入学习,看了一些博主的前端之路,觉得还是要多实践一下Html5/css3的应用,js的方面还是得再深入学习一下,做一次整体的网站实践项目,架构可维护易扩展的整站css。有博主推荐学习使用jQuery及编写jQuery扩展、前端模板、前端mvc(backbone)、模块化 阅读全文
posted @ 2016-07-10 21:00 云想默默 阅读(166) 评论(0) 推荐(0) 编辑