今天我们接着之前的教程继续学习
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 : 线条相交拐角类型