html5学习笔记之四（canvas对象）

看视频，做笔记：

1.例子：

<script>

var canvas = document.querySelector("canvas");

var context = canvas.getContext('2d');

context.fillStyle = 'red';

context.fileRect(0,0,800,600);

context.fillStyle = 'rgba(255,255,0,0.5)';

context.fillRect(400,200,800,600);

</script>

2.填充矩形区域

context.fillRect(x,y,w,h);  //填充矩形区域，设置参数

context.strokeRect(x,y,w,h);  //矩形区域边界绘制

context.clearRect(x,y,w,h);  //橡皮擦，将矩形区域内内容擦除

3.颜色指定方式（红色为例）

#FF0000、#F00、rgb(255,0,0)、rgb(100%,0%,0%)、rgba(255,0,0, 1.0)、rgba(100%,0%,0%, 1.0)、hsl(0,100%,50%)、hsla(0,100%,50%, 1.0) 、red等等。

4.阴影效果

context.shadowOffsetX = 2.0;

context.shadowOffsetY = 2.0;

context.shadowColor = "rgba(50%,50%,50%,0.75)";  //阴影颜色

context.shadowBlur = 2.0; //模糊程度

5.填充效果

渐变色效果又分为线性渐变、中心区域渐变。

线性渐变：

var linGrad = context.createLinearGradient(0,450,1000,450); // 起始位置到截止位置

linGrad.addColorStop(0.0,'red');  //渐变中节点

linGrad.addColorStop(0.5,'yellow');

linGrad.addColorStop(0.75,'orange');

linGrad.addColorStop(1.0,'purple');

context.fillStyle = linGrad;  //应用到图形上

context.fillRect(0,450,1000,450);

中心区域渐变：

var radGrad = context.createRadialGradient(260,320,40,200,400,200);   //定义渐变区域(x0,y0,r0,x1,y1,r1)

radGrad.addColorStop(0.0,'yellow');  //定义节点

radGrad.addColorStop(0.9,'orange');

randGrad.addColorStop(1.0,'rgba(0,0,0,0)');

context.fillStyle = radGrad;  // 定义填充对象

context.fillRect(0,200,400,400);

6.手绘

context.beginPath();

context.moveTo(300,700);

context.lineTo(600,100);

context.lineTo(900,700);

context.moveTo(350,400);

context.lineTo(850,400);

context.stroke();

绘制过程：开始绘制beginPath() --->定义所有节点---> 用stroke实现绘制。

绘制抛物线：context.quadraticCurveTo(cpx,cpy,x,y)

贝塞尔曲线：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

自定义曲线：context.arcTo(x1,y1,x2,y2,radius)

以弧度坐标标定义弧：context.arc(x,y,radius,startAngle,endangle,anticlockwise)

 

视频来源：http://v.youku.com/v_show/id_XMzc4OTI3NTc2.html