HTML5 基础教程二

时间:2022-05-31 17:02:20

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

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 : 线条相交拐角类型