web前端
文章平均质量分 78
ice_i_snow
这个作者很懒,什么都没留下…
展开
-
Canvas学习笔记(一)--基础知识
1、<canvas>元素 id:不是<canvas>元素专享,和标准的html标签一样,都可以为元素指定id;width:元素宽度,默认为300px。可以通过dom和css进行设置;height:元素高度,默认为150px。可以通过dom和css进行设置;注:使用css设置width和height时,渲染图像会缩放适应布局,这意味着图像发生了变形,...原创 2012-03-09 09:36:37 · 104 阅读 · 0 评论 -
Raphael学习笔记(5)--绘图(路径【椭圆曲线】)
1、椭圆曲线简介 前面的学习笔记:Raphael学习笔记(3)--绘图(路径【直线】)简单的描述了绘制椭圆曲线的参数,但没有详细的介绍各个参数的含义,这次,我们就详细的学习一下椭圆曲线的绘制。 A(a) elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y) ; 参数含...原创 2012-04-13 15:55:22 · 192 阅读 · 0 评论 -
Raphael学习笔记(4)--绘图(路径【贝塞尔曲线】)
贝塞尔曲线的基础知识 其它的什么都不说了,直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.or...原创 2012-04-12 20:43:33 · 202 阅读 · 0 评论 -
Raphael学习笔记(3)--绘图(路径【直线】)
1、路径简介 Paper.path(pathString):绘制路径;参数含义: pathString:描述路径的字符串; 下面详细描述一下路径字符串的内容和书写风格。路径由2部分组成:命令和坐标。 (1)命令:单个大(小)写字母。大写字母表示绝对坐标,小写字母表示相对坐标; (2)坐标:一个或多个数字。多个数字之间使用逗号或者空格隔开; (3)命令和...原创 2012-04-09 19:26:34 · 228 阅读 · 0 评论 -
Raphael学习笔记(2)--绘图(基本图形)
1、图形简介 与html5不同,Raphael提供了以下基本图形:矩形、圆形、椭圆形(html5只有矩形)。 Paper.rect(x,y,width,height,r):绘制矩形;参数含义: x,y:矩形左上角相对于原点(0,0)的坐标; width,height:矩形的宽度和高度; r:矩形圆角的半径; Paper.circle(x,y,r):绘制圆形;...原创 2012-04-09 16:05:37 · 133 阅读 · 0 评论 -
Raphael学习笔记(1)--简介
Raphael是一个JavaScript类库,用来在web上绘制矢量图。Raphael通过判断浏览器的不同,创建svg或vml对象,从而达到跨浏览器的效果。【svg简介,svg入门教程,vml简介,vml入门教程】 这意味着,无论是svg还是vml对象,都是一种DOM对象,所以我们可以为它们绑定事件或者修改它们。 Raphael支持用户自定义的扩展,我们可以在此之上扩展自己的组件。例如:...原创 2012-04-07 17:06:25 · 179 阅读 · 0 评论 -
使用CSS绘制基本图形
你懂得,不解释,直接上代码。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </titl原创 2012-03-31 15:12:06 · 81 阅读 · 0 评论 -
Canvas学习笔记(八)--样式
1、设置颜色 fillStyle = color; //设置填充颜色 strokeStyle = color; //设置边框颜色 color可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。默认为黑色(#000000)。 // 这些 fillStyle 的值均为 '红色' ctx.fillStyle = "red"; ctx.fillSt...原创 2012-03-13 11:34:07 · 106 阅读 · 0 评论 -
Canvas学习笔记(七)--应用图像
1、图像简介 此功能可以用于图片合成或者制作背景等。目前仅可以在图像中加入文字(标准说明中并没有包含绘制文字的功能)、加入图片(如 PNG,GIF,JPEG等)、加入其他的canvas元素。 2、引入图像的步骤 1)获取JavaScript的Image对象或者其它的canvas元素。但不能是简单的image路径或url; 2)使用drawImage()函数绘制图...原创 2012-03-12 14:28:41 · 121 阅读 · 0 评论 -
Canvas学习笔记(六)--绘图(综合使用)
首先看看需要完成的图像: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/...原创 2012-03-10 09:21:11 · 126 阅读 · 0 评论 -
Canvas学习笔记(五)--绘图(贝赛尔曲线)
1、二次贝塞尔曲线介绍 quadraticCurveTo(cpx,cpy,x,y) cpx,cpy表示控制点的坐标; x,y表示终点坐标; 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪: 2、二次贝赛尔曲线实例 <!DOCTYPE html PUBLIC "-//W3C//DTD...原创 2012-03-09 16:52:38 · 187 阅读 · 0 评论 -
Canvas学习笔记(四)--绘图(路径【弧线】)
1、绘制弧线的方法 arc(x, y, radius, startAngle, endAngle, anticlockwise) x,y:圆心的坐标; radius:圆心的半径; startAngle:起始弧度(以横轴X为标准); endAngle:终止弧度(以横轴X为标准); anticlockwise: true表示逆时针,false表示顺时针; 注:...原创 2012-03-09 11:28:35 · 165 阅读 · 0 评论 -
Canvas学习笔记(三)--绘图(路径【直线】)
1、绘制路径的方法 beginPath():开始一个新路径。 closePath():关闭路径。 stroke():绘制路径边框。 fill():使用颜色填充路径绘制的图形。 moveTo(x,y):设置坐标的位置。 lineTo(x,y):绘制一条直线。参数(x,y)是终点的坐标,起点坐标取决于前一路径(即:前一路径的终点就是当前路径的...原创 2012-03-09 10:38:40 · 173 阅读 · 0 评论 -
Canvas学习笔记(二)--绘图(矩形)
1、canvas网格坐标 左上角为坐标原点(0,0),横轴X向右坐标值增大,纵轴Y向下坐标值增大。坐标系中所有物体的位置都相对于这个原点。如图所示,蓝色方块的位置距左边x像素,距上面y像素,坐标为(x,y)。 2、绘制矩形 fillRect(x,y,width,height):绘制填充颜色的矩形; strokeRect(x,y,width,height):绘制带有边框的...原创 2012-03-09 10:18:57 · 233 阅读 · 0 评论 -
【转载】浏览器的工作原理:新式网络浏览器幕后揭秘
英文原文地址:http://taligarsiel.com/Projects/howbrowserswork1.htm 中文原文地址:http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/ 由于原文较长,内容复制过来之后,有很多地方产生变形,格式变得很乱。故将内容保存到word...原创 2013-05-23 08:52:59 · 97 阅读 · 0 评论