1、绘制一条直线
context.moveTo(100,100);
context.lineTo(700,700);
2、绘制一个箭头 →
closePath()要在stroke()前面
context.lineWidth = 15;
context.beginPath();
context.moveTo(100,200);
context.lineTo(500,200);
context.lineTo(500,100);
context.lineTo(700,300);
context.lineTo(500,500);
context.lineTo(500,400);
context.lineTo(100,400);
context.closePath();
context.fillStyle = 'yellow';
context.strokeStyle = '#058';
context.fill();
context.stroke();
3、>>>
beginPath() + lineTo() 相当于moveTo()
context.lineWidth = 10;
context.beginPath();
context.moveTo(100,200);
context.lineTo(300,400);
context.lineTo(100,600);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(300,200);
context.lineTo(500,400);
context.lineTo(300,600);
context.strokeStyle = 'blue';
context.stroke();
context.beginPath();
context.moveTo(500,200);
context.lineTo(700,400);
context.lineTo(500,600);
context.strokeStyle = 'yellow';
context.stroke();
4、绘制矩形
function drawRext(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
cxt.beginPath();
cxt.moveTo(x,y);
cxt.lineTo(x+width,y);
cxt.lineTo(x+width,y+height);
cxt.lineTo(x,y+height);
cxt.closePath();
cxt.lineWidth = borderWidth;
cxt.strokeStyle = borderColor;
cxt.fillStyle = fillColor;
cxt.fill();
cxt.stroke();
}
drawRext(context,100,100,400,400,10,'#058','red');
5 、cxt.rect(x,y,width,height);
cxt.rect(x,y,width,height);
相当于
cxt.moveTo(x,y);
cxt.lineTo(x+width,y);
cxt.lineTo(x+width,y+height);
cxt.lineTo(x,y+height);
context.rect(100,100,400,400);
context.lineWidth = 10;
context.strokeStyle = '#058';
context.fillStyle = 'red';
context.fill();
context.stroke();
6、context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);
context.lineWidth = 10;
context.strokeStyle = '#058';
context.fillStyle = 'red';
context.fillRect(100,100,400,400);
context.strokeRect(100,100,400,400);
7、 fillStyle,strokeStyle
#ffffff
hex #RRGGBB 或 #RGB
#642;
RGB(R,G,B)
rgb(255,128,0);
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
rgba(100,100,100,0.8);
RGBA(R,G,B,A)
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。
hsl(20,62%,28%);
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:Saturation(饱和度)。取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%
hsla(40,82%,33%,0.6);
HSLA(H,S,L,A)
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:Saturation(饱和度)。取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%
A:Alpha透明度。取值0~1之间。
red
drawRext(context, 100, 100, 400, 400, 10, '#058', 'red');
drawRext(context, 300, 300, 400, 400, 10, '#058', 'rgba(0,256,0,0.5)');
8、
context.lineWidth = 10;
context.strokeStyle = '#005588';
context.beginPath();
context.moveTo(100,200);
context.lineTo(700,200);
context.lineCap = 'butt';
context.stroke();
context.beginPath();
context.moveTo(100,400);
context.lineTo(700,400);
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(100,600);
context.lineTo(700,600);
context.lineCap = 'square';
context.stroke();
context.lineWidth = 1;
context.strokeStyle = '#27a';
context.moveTo(100,100);
context.lineTo(100,700);
context.moveTo(700,100);
context.lineTo(700,700);
context.stroke();
9、绘制箭头用lineCap
context.lineWidth = 10;
context.moveTo(100,350);
context.lineTo(500,350);
context.lineTo(500,200);
context.lineTo(700,400);
context.lineTo(500,600);
context.lineTo(500,450);
context.lineTo(100,450);
context.lineTo(100,350);
context.strokeStyle = '#058';
context.lineCap="square";
context.stroke();