代码改变世界

HTML5 基础教程一

2012-12-25 22:13  y-z-f  阅读(478)  评论(0)  编辑  收藏  举报

本教程的目的在于如何使用 Canvas API

1.在页面上画出一个矩形

以下为HTML5代码:

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

以下为js代码:

1 var obj = document.getElementById("sl1");
2 var gtx = obj.getContext("2d");
3 gtx.fillStyle = "#00f";
4 gtx.fillRect(0,0,100,50);

getContext : 获得平面画布，参数现在只能为 2d

fillStyle : 绘画的颜色、渐变或模式

fillRect : 绘制填充的矩形，前两者参数为矩形的左上角坐标,第三个为矩形长度,第四个为矩形的高度

 

2.在页面上画出一个纵向渐变的矩形

以下为HTML5代码:

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

以下为js代码:

1 var obj = document.getElement("sl2");
2 var gtx = obj.getContext("2d");
3 var my_color = gtx.createLinearGradient(0,0,0,50);
4 my_color.addColorStop(0,"red");
5 my_color.addColorStop(1,"white");
6 gtx.fillStyle = my_color;
7 gtx.fillRect(0,0,100,50);

 createLinearGradient : 创建线性渐变，前两者为渐变的开始坐标,后两者为结束坐标

addColorStop : 增加渐变对象中的颜色和停止位置，第一个为介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。第四个为渐变的颜色

3.在页面上画出一个三个颜色的渐变

以下为HTML5代码

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

以下为js代码

1 var obj = document.getElementById("sl3");
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,"white");
7 gtx.fillStyle = my_color;
8 gtx.fillRect(0,0,100,50);

这里没有什么太神奇的地方,只是多增加了一个渐变颜色

4.在网页上画一个边框

以下为HTML5代码

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

以下为js代码

1 var obj = document.getElementById("sl4");
2 var gtx = obj.getContext("2d");
3 gtx.strokeStyle = "#00f";
4 gtx.strokeRect(0,0,100,50);

strokeStyle : 设置笔触的颜色、渐变和模式

strokeRect : 绘制矩形（无填充）

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.createLinearGradient(0,0,100,0);
4 my_color.addColorStop(0,"red");
5 my_color.addColorStop(0.5,"white");
6 my_color.addColorStop(1,"yellow";
7 gtx.strokeStyle = my_color;
8 gtx.lineWidth = 5;
9 gtx.strokeRect(0,0,100,50);

lineWidth : 线条宽度