canvas绘制直线

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();