js -画布中的各种图形与使用方法

原文地址:https://blog.csdn.net/qq_37674616/article/details/82702158

目录

画布

绘制矩形

绘制路径

圆

示例

直线

示例

曲线

绘制文本

属性

方法

渐变

线性渐变

径向渐变

变形

组合

阴影

图像

平铺

裁剪

---

画布

绘制步骤:

         1.获取canvas元素

         2.获取2d上下文对象

         3.设置默认样式

         4.设置线宽

                   lineWidth=3;在边框绘制的时候使用

         5.绘制

状态:

     save()

            保存坐标、样式、阴影、线宽

    restore()

           恢复之前保存的样式

案例:绘制三个矩形，是最后一个样式与第一个相同

不支持时显示

绘制矩形

fillRect(startX,startY,w,h)

按fillSyle的样式显示填充的矩形。

strokeRect(startX,startX,w,h)

按 strokeStyle显示边框矩形。

clearRect(startX,startY,w,h)

用于清除矩形特定的区域。一般也用于清除画布。

示例

不支持该属性

 

绘制路径

步骤:

1.设置路径

 2.关闭路径

3.绘制

圆

1.设置路径

          arc(圆心x,y,r,开始角度,结束角度,是否逆时针);true  逆时针  false 顺时针

2.关闭路径

         closePath()

3.绘制

                 fill()

                 stroke()

示例

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');

context.strokeStyle='blue';

context.fillStyle='orange';

context.lineWidth=3;

context.beginPath();

//参数 源圆心坐标 x y 半径 开始弧度,结束弧度,是否逆时针绘制 true逆时针

context.arc(100,100,50,0,Math.PI/2,true);

//结束路径

context.closePath();

//绘制

context.stroke();

//或者使用 context.fill() 绘制

直线

1.开始路径

        beginPath();

2. 设置路径

        moveTo(startx,starty);

        lineTo(endx,endy)

3.关闭路径

        closePath()

示例

曲线

beizerCurveTo(x1,y1,x2,y2,endx,endy);

//x1 y1 x2 y2 为控制点坐标

quadraticCurveTo(控制点x,控制点y,endx,endy);

示例

绘制文本

属性

align

表示文本对齐方式

 type取值:start、end、left、center、right

textBaseline='type'

表示文本的基线。

           type常用取值: top、middle、bottom

font

表示文本样式、大小及字体，用 CSS 中指定字体的格式来指定例如: 'bold 15px 宋体';

方法

fillText('内容',startx,starty,maxWidth);

strokeText('内容',startx,starty,maxWidth);

示例

 

渐变

线性渐变

1.创建渐变

      var gradient=createLinearGradient(xstart,ystart,xend,yend);   

2.添加渐变颜色

          addColorStop(偏移量,颜色);//偏移量 0-1

3.设置渐变

      fillStyle=gradient;

径向渐变

创建步骤和线性渐变的步骤都相同

createRadialGradient(xstart,ystart,r,xstart,ystart,r);

示例

 

 

变形

 操作的是坐标轴

translate(x偏移量,y偏移量)

scale(x轴放大的倍数,y轴放大的倍数)

      参数大于1 放大   参数小于1

rotate(角度)

       默认顺时针旋转,如果想逆时针旋转设定负数

示例

组合

设置新图形与旧图形的重叠方式和显示样式

        context.globalCompositePeration='type'

type取值

                source-over             默认 新图形在上

                destination-over    旧图形在上

                source-in            只显示新图形的重叠部分

                destination-in         只显示旧图形的重叠部分

                source-out            新的图形的不重叠部分

                destination-out     旧图形的不重叠部分

                source-atop         新图形的重叠部分和旧图形的不重叠部分

                destination-atop    旧图形的重叠部分和新图形的不重叠部分

                lighter             都显示 重叠部分加色处理

                xor                    都显示,重叠部分隐藏

                copy                 只显示新图形        

示例

阴影

shadowOffsetX=4

     x方向偏移

shadowOffsetY=4

        y方向偏移

shadowColor='red'

        阴影的颜色

shadowBlur=4

         模糊距离

示例

图像

drawImage(img节点,x,y);

原图绘制

        drawImage(img节点,x,y,w,h);

缩放原图

        context.drawImage(img节点,区域x,y,w,h,endx,endy,w,h);

复制图像的一部分绘制到指定位置,并设置宽高

示例

平铺

1.创建平铺对象

            var pattern=context.createPattern(img节点,类型);

            类型

                no-repeat

                repeat-x

                repeat-y

                repeat

2.使用

            context.fillStyle=pattern;

示例

裁剪

要放到绘制的中间，将图片裁剪到绘制的路径中。

1.创建路径

            context.beginPath();

            context.arc(100,100,100,0,Math.PI*2);

            context.closePath();

 2.context.clip()

3.绘制图片

            context.drawImage(img,0,0);

示例