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

原文地址: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';
 
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()

示例

<canvas id="canvas" width="400px" height="400px"></canvas><script>
 
var canvas=document.getElementById('canvas');
 
var context=canvas.getContext('2d');
 
context.strokeStyle="black";
 
context.lineWidth=2;
 
context.beginPath();
 
//起点坐标
 
context.moveTo(0,0);
 
//结束点坐标
 
context.lineTo(100,200);
 
context.lineTo(100,100);
 
context.lineTo(200,0);
 
context.closePath();
 
context.stroke();
 
</script>

曲线

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

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

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

示例

<canvas id="canvas" width="400px" height="400px"></canvas>
 
<script>
 
var canvas=document.getElementById('canvas');
 
var context=canvas.getContext('2d');
 
context.beginPath();
 
//起点坐标
 
context.moveTo(0,0);
 
//控制点的x,y 控制点 x y 结束点x y
 
// context.bezierCurveTo(200,10,200,300,400,400);
 
//参考的 x y 结束点 x y
 
context.quadraticCurveTo(150,10,200,200);
 
context.quadraticCurveTo(230,350,400,400);
 
context.closePath();
 
//绘制
 
context.stroke();
 
</script>
 

绘制文本

属性

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

示例

<canvas id="canvas" width="400px" height="400px"></canvas>
 
<img src="" alt="">
 
<script>
 
var canvas = document.getElementById('canvas');
 
var img = document.getElementsByTagName('img')[0];
 
var context = canvas.getContext('2d');
 
//绘制文本
 
//参数 文本内容 开始x y 最大w
 
context.font = 'bold 20px 宋体';
 
context.textAlign = 'left';
 
context.textBaseline = '';
 
context.fillText('你好', 200, 200, 30);
 
context.beginPath();
 
context.moveTo(0, 200);
 
context.lineTo(200, 200);
 
context.closePath();
 
context.stroke();
 
//导出位图
 
var url = canvas.toDataURL('2.png');
 
img.src = url;
 
</script>
 

 

渐变

线性渐变

1.创建渐变

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

2.添加渐变颜色

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

3.设置渐变

      fillStyle=gradient;

径向渐变

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

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

示例

<canvas id="canvas" width="400px" height="400px"></canvas>
 
<script>
 
var canvas=document.getElementById('canvas');
 
var context=canvas.getContext('2d');
 
//创建渐变对象
 
// var gradient=context.createLinearGradient(0,0,200,0);
 
//x,y r
 
var gradient=context.createRadialGradient(100,100,20,100,100,100);
 
gradient.addColorStop(0,'red');
 
gradient.addColorStop(0.5,'orange');
 
gradient.addColorStop(1,'blue');
 
context.fillStyle=gradient;
 
context.fillRect(10,10,200,200);
 
</script>

 

 

变形

 操作的是坐标轴

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

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

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

rotate(角度)

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

示例

<canvas id="canvas" width="400px" height="400px"></canvas>
 
<script>
 
var canvas=document.getElementById('canvas');
 
var context=canvas.getContext('2d');
 
context.fillStyle='red';
 
//x y 轴偏移量
 
context.translate(100,100);
 
//坐标轴旋转45度
 
//context.rotate(-Math.PI/4);
 
//x轴缩小一半,y轴不变
 
// context.scale(0.5,1);
 
context.fillRect(0,0,200,200);
 
context.fillRect(0,200,50,50);
 
console.log(context);
 
</script>

组合

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

        context.globalCompositePeration='type'

type取值

                source-over             默认 新图形在上

                destination-over    旧图形在上

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

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

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

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

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

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

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

                xor                    都显示,重叠部分隐藏

                copy                 只显示新图形        

示例

<canvas id="canvas" width="400px" height="400px"></canvas>
 
<script>
 
var canvas = document.getElementById('canvas');
 
var context = canvas.getContext('2d');
 
 
 
context.fillStyle = "blue";
 
context.fillRect(0, 0, 200, 200);
 
//设置重叠显示效果
 
context.globalCompositeOperation = 'lighter';
 
context.beginPath();
 
context.fillStyle = "orange";
 
context.arc(200, 200, 100, 0, Math.PI * 2);
 
context.closePath();
 
context.fill();
 
</script>

阴影

shadowOffsetX=4

     x方向偏移

shadowOffsetY=4

        y方向偏移

shadowColor='red'

        阴影的颜色

shadowBlur=4

         模糊距离

示例

<canvas id="canvas" width="400px" height="400px"></canvas>
 
<script>
 
var canvas=document.getElementById('canvas');
 
console.log(canvas);
 
var context=canvas.getContext('2d');
 
context.fillStyle="blue";
 
//x轴偏移量
 
context.shadowOffsetX=5;
 
//y轴偏移量
 
context.shadowOffsetY=5;
 
context.shadowColor='orange';
 
//阴影模糊距离
 
context.shadowBlur=10;
 
context.fillRect(0,0,200,200);
 
context.fill();
 
</script>

图像

drawImage(img节点,x,y);

原图绘制

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

缩放原图

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

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

示例

<canvas id="canvas" width="800px" height="600px"></canvas>
 
<script>
 
var canvas = document.getElementById('canvas');
 
var context = canvas.getContext('2d');
 
//绘制图像
 
//1.创建图像对象
 
var img = new Image();
 
img.src = 'element.png';
 
console.log(img);
 
img.onload = function() {
 
//参数 img节点,和开始绘制的位置x和y
 
context.drawImage(img, 0, 0, 500, 500);
 
// 参数 img节点 局部位置x，y 宽 高,目标位置x y 宽 高
 
context.drawImage(img, 262, 235, 39, 17, 638, 292, 80, 40);
 
}
 
</script>

平铺

1.创建平铺对象

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

            类型

                no-repeat

                repeat-x

                repeat-y

                repeat

2.使用

            context.fillStyle=pattern;

示例

<canvas id="canvas" width="800px" height="600px"></canvas><script>
 
var canvas = document.getElementById('canvas');
 
var context = canvas.getContext('2d');
 
//绘制图像
 
//1.创建图像对象
 
var img = new Image();
 
img.src = '1.png';
 
console.log(img);
 
img.onload = function() {
 
var pattern = context.createPattern(img, 'repeat');
 
context.fillStyle = pattern;
 
context.fillRect(0, 0, 300, 300);
 
context.fill();
 
}
 
</script>

裁剪

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

1.创建路径

            context.beginPath();

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

            context.closePath();

 2.context.clip()

3.绘制图片

            context.drawImage(img,0,0);

示例

<canvas id="canvas" width="800px" height="600px"></canvas>
 
<script>
 
var canvas = document.getElementById('canvas');
 
var context = canvas.getContext('2d');
 
//绘制图像
 
//创建一个圆的路径
 
context.beginPath();
 
context.arc(150, 150, 150, 0, Math.PI * 2);
 
context.closePath();
 
//裁剪
 
context.clip();
 
//1.创建图像对象
 
var img = new Image();
 
img.src = '1.png';
 
console.log(img);
 
img.onload = function() {
 
var pattern = context.createPattern(img, 'repeat');
 
context.fillStyle = pattern;
 
context.fillRect(0, 0, 300, 300);
 
context.fill();
 
}
 
</script>