1. 绘制三角形
fill是填充面（实心），stroke是画线（空心）
<script type="text/javascript">
//首先，找到 <canvas> 元素:
var canvas = document.getElementById('myCanvas');
//然后，创建 context 对象：
//getContext("2d") 对象是内建的 HTML5 对象，
//拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var context = canvas.getContext('2d');
//canvas 是一个二维网格。
//canvas 的左上角坐标为 (0,0)
context.beginPath();
//moveTo(x,y) 定义线条开始坐标
context.moveTo(0,0);
//lineTo(x,y) 定义线条结束坐标
//绘制三角形
context.lineTo(0,100);
context.lineTo(100,100);
context.lineTo(0,0)
context.strokeStyle = "#0000FF";
context.stroke();
// context.lineWidth = 10;
// context.fillStyle = "#008000";
// context.fill();
2. 画圆
lineCap:线帽 有三个参数
- butt 默认。向线条的每个末端添加平直的边缘。
- round 向线条的每个末端添加圆形线帽。
- square 向线条的每个末端添加正方形线帽。
context.arc(参数1,参数2,参数3,参数4,参数5,参数6);
- 参数1 参数2 圆形原点的坐标
- 参数3 半径
- 参数4 绘制圆形的起始角度
- 参数5 绘制圆形的结束角度
- 参数6 顺时针 | 逆时针 参数是布尔：true 逆时针，false 顺时针
context.arc(200,100,100,0,Math.PI,false);
//画圆
context.beginPath(); // 重新开启一个新的图层
context.arc(200,100,100,0,Math.PI,false);
context.lineCap = "round";
context.lineWidth = 15;
context.strokeStyle = "aquamarine";
context.stroke();
3. 矩形
context.rect(参数1,参数2,参数3,参数4);
- 参数1 ,参数2 矩形绘制的起点位置（参数1为X轴的坐标，参数2为Y轴的坐标）
- 参数3,矩形的宽
- 参数4矩形的高
创建线条渐变 context.createLinearGradient(参数1,参数2,参数3,参数4);
- 参数1 ,参数2 渐变颜色开始的位置（参数1为X轴的坐标，参数2为Y轴的坐标）
- 参数3,参数4 渐变颜色结束的位置（参数3为X轴的坐标，参数4为Y轴的坐标）
grd.addColorStop(参数1,参数2);
- 参数1 ,0~1之间的数
- 参数3,参数4 颜色
//矩形
context.beginPath();
context.rect(0,200,200,100);
var grd = context.createLinearGradient(0,200,200,200);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"blue");
context.fillStyle = grd;
context.fill();
创建一个径向/圆渐变 context.createRadialGradient(xStart, yStart,radiusStart,xEnd, yEnd,radiusEnd);
-xStart, yStart 开始圆的圆心的坐标。
-radiusStart 开始圆的半径。
-xEnd, yEnd 结束圆的圆心的坐标。
-radiusEnd 结束圆的半径。
context.beginPath();
context.rect(0,200,200,100);
var grd = context.createRadialGradient(200,200,50,200,200,200);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"blue");
context.fillStyle = grd;
context.fill();
4. 文本
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
- context.textBaseline 垂直对齐方式
- context.textAlign 水平对齐方式
// bold 可以省略 Arial 不可以省略
context.font = "bold 50px Arial";
context.textBaseline = "middle";
context.textAlign = "center";
var grd = context.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"red");
context.fillStyle = grd;
context.fillText("hello",100,100);
