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

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

目录

画布

绘制矩形

绘制路径

圆

示例

直线

示例

曲线

绘制文本

属性

方法

渐变

线性渐变

径向渐变

变形

组合

阴影

图像

平铺

裁剪

---

画布

绘制步骤:

         1.获取canvas元素

         2.获取2d上下文对象

         3.设置默认样式

         4.设置线宽

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

         5.绘制

状态:

     save()

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

    restore()

           恢复之前保存的样式

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

<canvas id="canvas" width="400px" height="400px">不支持时显示</canvas>

<script>

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

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

context.strokeStyle="blue";

context.strokeRect(10,10,100,100); //'blue'

context.save();//保存绘制的样式 blue

context.strokeStyle="orange";

context.strokeRect(10,120,100,100); //'orange'

context.restore(); //恢复到上一次保存的样式

context.strokeRect(120,120,100,100); //'blue'

context.stroke();

</script>

绘制矩形

fillRect(startX,startY,w,h)

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

strokeRect(startX,startX,w,h)

按 strokeStyle显示边框矩形。

clearRect(startX,startY,w,h)

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

示例

<style>

#canvas{

border-left: 2px solid rgba(0,0,0,0.5);

border-bottom: 2px solid rgba(0,0,0,0.5);

}

</style>

<canvas id="canvas" width="400px" height="400px">不支持该属性</canvas>

<script>

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

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

context.fillStyle="skyblue"; //填充色

context.strokeStyle='blue'; //边框色

context.fillRect(0,300,30,100); //绘制填充矩形

context.strokeRect(35,250,30,150); //绘制边框矩形

context.fillRect(70,230,30,170);

context.clearRect(80,265,10,100); //清除矩形某个区域面积

</script>

 

绘制路径

步骤:

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&#