canvas-绘制功能

中文文档

1、绘制矩形fillRect(x,y,width,height)

ctx.fillRect(x, y, width, height);

x：矩形起始点的 x 轴坐标。

y：矩形起始点的 y 轴坐标。

width：矩形的宽度。

height：矩形的高度。

2、绘制路径lineTo(x,y)

绘制路径是为了设置不规则的多边形状态

路径都是闭合的，绘制路径的步骤

1. 设置路径起点
2. 使用绘制命令画出路径
3. 封闭路径
4. 填充或者描边

stroke() 通过线条绘制图形轮廓

fill()通过填充路径的内容区域生成图形

绘制路径的时候 可以不设置封闭路径 ctx.closePath(); 会自动填充

stroke()

fill()

 

3、绘制圆弧 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

  ctx.beginPath();
        //绘制
        ctx.arc(100,100,50,0,Math.PI * 2,false)
        ctx.fillStyle = "red";
        ctx.fill();

参数

1. x圆弧中心（圆心）的 x 轴坐标。

2. y圆弧中心（圆心）的 y 轴坐标。

3. radius圆弧的半径。

4. startAngle圆弧的起始点， x轴方向开始计算，单位以弧度表示。

5. endAngle圆弧的终点， 单位以弧度表示。

6. anticlockwise可选可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。 

0,Math.PI * 2指的是开始和结束的位置，单位如果是数字，则代表一个圆弧的弧度（一个圆的弧度是Math.PI * 2，约等于7个弧度），所以如果为两个参数的差为7，并且是顺时针方向，则表示绘制一个圆

4、透明度ctx.ctx.globalAlpha = value;

透明度的值是0~1之间

 ctx.arc(100,100,50,0,Math.PI * 2,false)
        ctx.fillStyle = "red";
        ctx.globalAlpha = 0.5
        ctx.fill();

5、线型ctx.lineWidth = value;

ctx.beginPath();
        //绘制
        ctx.moveTo(100,100,);
        ctx.lineTo(200,200);
        ctx.lineTo(300,100);
        ctx.lineWidth = 20;
        ctx.strokeStyle = "#333";
        ctx.stroke();

lineWidth设置线的粗细，属性值必须是数字，默认是1.0。没有单位

5.1、线型末端的属性lineCap = "butt ,round, square"

lineCap属性决定了每一条线段末端的属性，一共有3个属性值：分别是：butt, round and square。默认值是 butt

 ctx.lineCap = "round";

• butt线段末端以方形结束。

• round线段末端以圆形结束。

• square线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

5.2、线型连接处lineJoin="round , bevel, miter"

 ctx.lineJoin = "round"

round通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。

bevel在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。

miter通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。

5.3、虚线样式sctx.setLineDash([10,14]) 10：虚线长度，14：虚线之间的间隔

内部接受一个数组（数组内部是虚线的交替状态）

数组的内部可以是为一组的状态，最少接受两个参数，也可以传多个

  ctx.beginPath();
        //绘制
        ctx.moveTo(100,100,);
        ctx.lineTo(100,200,);
        ctx.lineTo(200,200);
        ctx.lineTo(200,100);
        ctx.closePath();
        ctx.setLineDash([10,14]);
        ctx.setLineDash([10,14,20,5,30,3]);
        ctx.strokeStyle = "#333";
        ctx.stroke();

5.4虚线起始偏移量ctx.lineDashOffset = 10;

 ctx.lineDashOffset = 10

6、文本

ctx.font =" 50px 微软雅黑"
ctx.textAlign = "left"
ctx.fillText("你好canvas",100,100)

文字的对齐方式：start (默认), end, left, right 或 center

需要注意的是文本的对齐方式的属性。注意，该对齐是基于CanvasRenderingContext2D.fillText方法的x的值

7、渐变：线型渐变和径向渐变

7.1线型渐变ctx.createLinearGradient(x0, y0, x1, y1);

• x0起点的 x 轴坐标。
• y0起点的 y 轴坐标。
• x1终点的 x 轴坐标。
• y1终点的 y 轴坐标。

 ctx.beginPath();
        //绘制
        /**/
        ctx.moveTo(100,100,);
        ctx.lineTo(100,500,);
        ctx.lineTo(600,500);
        ctx.lineTo(600,100);
        ctx.closePath();
        var linear = ctx.createLinearGradient(100,100,600,600);
        linear.addColorStop(0,"red");
        linear.addColorStop(0.2,"blue");
        linear.addColorStop(0.4,"yellow");
        linear.addColorStop(0.6,"orange");
        linear.addColorStop(0.8,"pink");
        linear.addColorStop(1,"green");
        ctx.fillStyle = linear;
        ctx.fill();

addColorStop内部接受两个参数，第一个参数是当前渐变的位置（0-1之间的小数），第二个参数是颜色

7.2径向渐变ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

• x0开始圆形的 x 轴坐标。
• y0开始圆形的 y 轴坐标。
• r0开始圆形的半径。
• x1结束圆形的 x 轴坐标。
• y1结束圆形的 y 轴坐标。
• r1结束圆形的半径。

ctx.beginPath();
        //绘制
        /**/
        ctx.moveTo(100,100,);
        ctx.lineTo(100,500,);
        ctx.lineTo(600,500);
        ctx.lineTo(600,100);
        ctx.closePath();
        var linear = ctx.createRadialGradient(300, 300, 100, 300, 300, 0);
        linear.addColorStop(0,"red");
        linear.addColorStop(0.2,"blue");
        linear.addColorStop(0.4,"yellow");
        linear.addColorStop(0.6,"orange");
        linear.addColorStop(0.8,"pink");
        linear.addColorStop(1,"green");
        ctx.fillStyle = linear;
        ctx.fill();

8阴影

文字阴影

 var ctx = canvas.getContext("2d");
        ctx.shadowOffsetX = 10;
        ctx.shadowOffsetY = 10;
        ctx.shadowBlur = 3;
        ctx.shadowColor = "red";
        ctx.font = "30px 宋体";
        ctx.fillText("你好canvas", 100, 100);

矩形阴影

 var ctx = canvas.getContext("2d");
        ctx.shadowColor = "black";
        ctx.shadowOffsetX = 10;
        ctx.shadowBlur = 10;
        ctx.fillStyle = "green";
        ctx.fillRect(100, 100, 100, 100);

• shadowOffsetX阴影左右偏离的距离
• shadowOffsetY阴影上下偏离的距离
• shadowBlur模糊状态
• shadowColor阴影颜色