HTML5 基础教程一 yz

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

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

以下为HTML5代码:

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

以下为js代码:

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

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

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

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

---

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

以下为HTML5代码:

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

以下为js代码:

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

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

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

---

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

以下为HTML5代码

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

以下为js代码

var obj = document.getElementById("sl3");
var gtx = obj.getContext("2d");
var my_color = gtx.createLinearGradient(0,0,100,0);
my_color.addColorStop(0,"red");
my_color.addColorStop(0.5,"yellow");
my_color.addColorStop(1,"white");
gtx.fillStyle = my_color;
gtx.fillRect(0,0,100,50);

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

---

4.在网页上画一个边框

以下为HTML5代码

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

以下为js代码

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

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

strokeRect : 绘制矩形（无填充）

---

5.在网页上画一个彩色边框

以下为HTML5代码

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

以下为js代码

var obj = document.getElementById("sl5");
var gtx = obj.getContext("2d");
var my_color = gtx.createLinearGradient(0,0,100,0);
my_color.addColorStop(0,"red");
my_color.addColorStop(0.5,"white");
my_color.addColorStop(1,"yellow";
gtx.strokeStyle = my_color;
gtx.lineWidth = 5;
gtx.strokeRect(0,0,100,50);

lineWidth : 线条宽度