- 博客(7)
- 收藏
- 关注
转载 HTML5学习笔记-绘制变形图形之绘制带阴影图形
绘制带阴影效果的图形 在canvas上绘制带阴影效果的图形只需设置shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor属性。 shadowOffsetX,shadowOffsetY表示阴影的x,y偏移量单位像素;可以使用负值,正负偏移方向不同。shadowBlur设置阴影模糊程度,值越大,阴影越模糊,效果与Photoshop的高斯模糊...
2016-07-14 12:44:00 155
转载 HTML5学习笔记-绘制变形图形之组合效果
绘制组合效果的图形 将一个图形绘制在另一个图形之上,图形效果会受制于图形的绘制顺序,可利用globalCompositeOperation属性组合图形,前面绘制贝塞尔曲线时,我就已经用过这个属性了,绘制了多条凡尔赛曲线,组合成了一个图形。利用globalCompositeOperation属性在已有图形后面再画新图形,还可遮盖、清除(比clear方法强劲的多)某些区域。语法格式:glo...
2016-07-14 12:25:00 201
转载 HTML5学习笔记-绘制变形图形
canvas可以使用moveTo来移动画笔,同时也可以使用变换来调整画笔下的画布,变换的方法包括旋转、平移和缩放,绘制图形很方便。 绘制平移效果的图形 实现图形的平移用translate(x,y)方法,如,原来在(100,100),translate(1,1),则新坐标原点在(101,101). 1 <h3>变换原点坐标</h3> 2 <ca...
2016-07-14 10:02:00 165
转载 HTML5学习笔记-绘制渐变图形
绘制线性渐变 step1 创建渐变对象:var gradient=cxt.createLinearGradient(x0,y0,x1,y1);沿直线从(x0,y0)到(x1,y1)渐变;step2 为渐变对象设置颜色,指明过渡方式:gradient.addColorStop(0,'#fff');gradient.addColorStop(1,'#000');参数为偏移量和颜色,偏移量是...
2016-07-14 09:48:00 149
转载 HTML5学习笔记-使用canvas绘制图形
canvas标签是一个矩形区域,它包含两个属性,width和height,默认为300px和150px. 常用形式如下: <canvas id="mycanvas" width="400" height="200" style="border:1px solid #color;"> ...提示信息 </canvas> 也可写成形式如: &...
2016-07-14 09:34:00 136
转载 CSS控制,使用图片作为序列标记
今天看以前写的网页设计作业,看见要将图片作为项目标记显示,而我居然使用的是背景图片插入完成了这一效果,觉得我当时的脑回路也是蛮神奇的,现在总结实现的方法,也让自己加深印象吧! 实现效果: 方法一:自然是使用list-style-image属性 #mainContent>li{ list-style-image:url(bullet_blue.png); } 这...
2016-07-10 21:47:00 430
转载 学习路线
这个假期开始进行web前端的深入学习,看了一些博主的前端之路,觉得还是要多实践一下Html5/css3的应用,js的方面还是得再深入学习一下,做一次整体的网站实践项目,架构可维护易扩展的整站css。有博主推荐学习使用jQuery及编写jQuery扩展、前端模板、前端mvc(backbone)、模块化开发(amd/cmd)、mvvm开发模式、react为代表的redux模式,还是有...
2016-07-10 21:00:00 81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人