代码改变世界

HTML5 基础教程二

2012-12-26 08:46  y-z-f  阅读(352)  评论(0)  编辑  收藏  举报

今天我们接着之前的教程继续学习

1.使用渐变笔触写本文

以下为HTML5代码

1 <canvas id="sl1"></canvas>

以下为js代码

1 var obj = document.getElementById("sl1");
2 var gtx = obj.getContext("2d");
3 var my_color = gtx.createLinearGradient(0,0,100,0);
4 my_color.addColorStop(0,"red");
5 my_color.addColorStop(0.5,"yellow");
6 my_color.addColorStop(1,"blue");
7 gtx.strokeStyle = my_color;
8 gtx.strokeText("HTML5 Canvas",50,50);

strokeText :在画布上绘制文本（没有填充，就是空心），第一个参数为需要绘制的字，后两者为绘制字体的左上角坐标

如果需要设置字体可以使用如下的js代码

1 gtx.font = "30px Verdana";

该font与css的font属性一样

2.带阴影的矩形

以下为HTML5代码

1 <canvas id="sl2"></canvas>

以下为js代码

1 var obj = document.getElementById("sl2");
2 var gtx = obj.getContext("2d");
3 gtx.shadowColor = "black";
4 gtx.shadowBlur = 20;
5 gtx.fillRect(0,0,100,50);

shadowColor : 设置阴影的颜色

shadowBlur : 设置阴影的模糊等级

3.阴影左右偏移

以下为HTML5代码

1 <canvas id="sl3"></canvas>

以下为js代码

1 var obj = document.getElementById("sl3");
2 var gtx = obj.getContext("2d");
3 gtx.fillStyle = "red";
4 gtx.shadowColor = "black";
5 gtx.shadowBlur = 20;
6 gtx.shadowOffsetX = 20;
7 gtx.fillRect(0,0,100,50);

shadowOffsetX : 设置左右偏移（负数为向左，正数为向右）

4.阴影上下偏移

以下为HTML5代码

1 <canvas id="sl4"></canvas>

以下为js代码

1 var obj = document.getElement("sl4");
2 var gtx = obj.getContext("2d");
3 gtx.shadowColor = "black";
4 gtx.shadowBlur = 20;
5 gtx.shadowOffsetY = 20;
6 gtx.fillRect(0,0,100,50);

shadowOffsetY : 设置阴影的上下偏移（负数为向上，正数为向下）

 5.放射状渐变

以下为HTML5代码

1 <canvas id="sl5"></canvas>

以下为js代码

1 var obj = document.getElementById("sl5");
2 var gtx = obj.getContext("2d");
3 var my_color = gtx.createRadialGradient(30,30,20,30,30,50);
4 my_color.addColorStop(0,"red");
5 my_color.addColorStop(1,"blue");
6 gtx.fillStyle = my_color;
7 gtx.fillRect(0,0,100,100);

createRadialGradient : 创建放射状渐变（前三个参数为第一个圆的圆心坐标以及半径，后三者为第二个圆的圆心坐标以及半径）

6.设置线帽（简单点说就是直线顶头的形状）

以下为HTML5代码

1 <canvas id="sl6"></canvas>

以下为js代码

1 var obj = document.getElementById("sl6");
2 var gtx = obj.getContext("2d");
3 gtx.lineCap = "round";
4 gtx.moveTo(10,10);
5 gtx.lineTo(50,50);
6 gtx.stroke();

 lineCap : 设置线帽的样式（bevel:斜角;round:圆角;miter:尖角（默认））

moveTo : 将路径移动到画布中的指定点

lineTo : 创建一个新点,并且将该点与前一个路径的点连接

 

 7.设置相交拐角类型

以下为HTML5代码

1 <canvas id="sl7"></canvas>

以下为js代码

1 var obj = document.getElementById("sl7");
2 var gtx = obj.getContext("2d");
3 gtx.beginPath();
4 gtx.lineWidth = 10;
5 gtx.lineJoin = "round";
6 gtx.moveTo(20,20);
7 gtx.lineTo(100,50);
8 gtx.lineTo(20,100);
9 gtx.stroke();

beginPath : 重置当前路径

lineWidth : 线条宽度

lineJoin : 线条相交拐角类型