HTML5 基础教程二 yz

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

1.使用渐变笔触写本文

以下为HTML5代码

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

以下为js代码

var obj = document.getElementById("sl1");
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,"blue");
gtx.strokeStyle = my_color;
gtx.strokeText("HTML5 Canvas",50,50);

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

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

gtx.font = "30px Verdana";

该font与css的font属性一样

---

2.带阴影的矩形

以下为HTML5代码

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

以下为js代码

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

shadowColor : 设置阴影的颜色

shadowBlur : 设置阴影的模糊等级

---

3.阴影左右偏移

以下为HTML5代码

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

以下为js代码

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

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

---

4.阴影上下偏移

以下为HTML5代码

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

以下为js代码

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

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

---

 5.放射状渐变

以下为HTML5代码

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

以下为js代码

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

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

---

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

以下为HTML5代码

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

以下为js代码

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

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

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

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

---

 7.设置相交拐角类型

以下为HTML5代码

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

以下为js代码

var obj = document.getElementById("sl7");
var gtx = obj.getContext("2d");
gtx.beginPath();
gtx.lineWidth = 10;
gtx.lineJoin = "round";
gtx.moveTo(20,20);
gtx.lineTo(100,50);
gtx.lineTo(20,100);
gtx.stroke();

beginPath : 重置当前路径

lineWidth : 线条宽度

lineJoin : 线条相交拐角类型