本教程的目的在于如何使用 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 : 线条宽度