画布 canvas 的相关内容

Posted 2020-09-05 独艾心尔

1.什么是canvas

　　canvas也被叫做画布，是在javascript中完成网页图像制作的一个重要的途径，画布是一个矩形区域，在这个矩形区域中你可以利用好这里的每一个像素。同样在canvas中也有着别样的，快捷的，多种多样的绘制路径、矩形、圆形、字符以及添加图像的方法。

2.如何创建一个canvas元素

　　在html5中创建一个canvas元素，你可以设置它的id名，同时也可以设置canvas的宽度和宽度、当然如果我们要绘制的话还要获取一下，canvas的context。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

3.如何在canvas中绘制图形

　　在canvas中提供了很多简单绘制图形的方法、现在我们开始介绍

　　3.1如何绘制一个矩形、矩形可以说是我们在绘制图形中比较常用的基础图形之一了，在绘制一个举行的时候，最基本的四个要素无非就是，矩形开始的时候的水平位置 x ,开始为垂直位置 y ，矩形的宽度 width ， 矩形的高度 height、

　　　　3.1.1 最基础的矩形， rect（）来绘制矩形　　　　　　　

ctx.rect(20,20,150,100); // rect(x,y,width,height)
ctx.stroke()； 

　　　　3.1.2 fillRect（）：有填充色的矩形（默认的填充色是黑色）

ctx.fillRect(20,20,150,100); // fillRect(x,y,width,height)

　　　　3.1.3 strokeRect() : 未填充的矩形也可以理解为一个矩形边框

ctx.strokeRect(20,20,150,100); // strokeRect(x,y,width,height)

　　　　3.1.4　clearRect () :清除一个矩形区域 

ctx.fillRect(0,0,300,150); // 原来画的矩形区域
ctx.clearRect(20,20,100,50); // 清除的矩形区域 （可以看到在清除区域内没有填充色、证明该区域已经被清除）

　　3.2如何绘制一个圆形。在canvas中圆形也是比较常用的工具，同时圆和弧线的区别就是，弧线是圆的一部分，所以说我们可以根据角度来绘制我们需要的弧线

　　　　3.1.1 arc（）：绘制一个圆和部分圆：绘制一个圆有五个要素：1.圆心的横坐标、2.圆心的纵坐标、3.圆的半径、4.圆的起始角度、5.圆的结束角度 （Math.PI =π=180度）

ctx.arc(250,250,100,0,Math.PI*2); // 圆心坐标为（250，250），半径为100的圆
ctx.stroke();

　　　　3.1.2画一个圆弧

ctx.arc(250,250,100,0,Math.PI,false); //  半圆 //前面的参数是一样的 最后的false是默认值
ctx.stroke(); 

ctx.arc(250,250,100,0,Math.PI,true); // 一个圆减去所画的部分，的剩余部分；（也可以理解为互补的部分）

　　3.3 如何通过利用点来绘制线条，在构图中线条是极其重要的，现在我们来说一下如何通过点来构建线条

ctx.beginPath(); // 开始绘图
ctx.moveTo(250,250); // moveTo(x,y) 开始绘图的点的坐标
ctx.lineTo(500,500); // lineTo(x,y) 定义结束点的坐标
ctx.closePath(); // 关闭路径
ctx.stroke(); // 将两个点用线连接

　　3.3.1如何利用点绘制一个三角形

ctx.beginPath(); // 开始绘图 (会将图形进行一个自动连接，形成一个封闭的图形)
ctx.moveTo(100，100); // 开始点的位置
ctx.lineTo(250,250); // 
ctx.lineTo(400,400); //
ctx.closePath(); // 关闭路径（作为一个封闭图形存在）
ctx.stroke(); // 用线连接

4.canvas中的一些简单的效果

　　4.1 fillStyle : 更改用于填充绘画的样式：

ctx.fillStyle = "red" ; // 更改填充颜色为红色

　　4.2 strokeStyle：官方解释为更改用于笔触的颜色；也可以简单理解为更改连接线的颜色

ctx.strokeStyle = "red"; // 更改笔触颜色为红色

　　4.3 shadowColor：设置阴影颜色、 shadowBlur：后面加数值：表示阴影模糊的程度，默认值是0

ctx.shadowBlur=20; //设置模糊的级别
ctx.shadowColor="black"; // 设置阴影颜色为black；
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80); // 在矩形周围会产生一个黑色的阴影

　　4.4 shadowOffsetX: 设置阴影与原图形的水平距离

ctx.shadowOffsetX //  属性设置或返回阴影与形状的水平距离。
ctx.shadowOffsetX=0 // 指示阴影位于形状的正下方。
ctx.shadowOffsetX=20 // 指示阴影位于形状 left 位置右侧的 20 像素处。
ctx.shadowOffsetX=-20 // 指示阴影位于形状 left 位置左侧的 20 像素处。

　　4.5 shadowOffsetY:设置阴影与原图形的垂直距离

ctx.shadowOffsetY  // 属性设置或返回阴影与形状的垂直距离。
ctx.shadowOffsety=0 // 指示阴影位于形状的正下方。
ctx.shadowOffsetY=20 // 指示阴影位于形状 top 位置下方的 20 像素处。
ctx.shadowOffsetY=-20 // 指示阴影位于形状 top 位置上方的 20 像素处。

　　4.6 createLinearGradient(): 创建线性渐变 createLinearGradient（x0,y0,x1,y1）

　　　　x0(渐变开始的横坐标)、y0（渐变开始的纵坐标）、x1（渐变结束的横坐标）、y1（渐变结束的纵坐标）

var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black"); // 设置渐变开始颜色
my_gradient.addColorStop(1,"white"); // 设置渐变结束颜色
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

　　4.7 creatPattern（）：在指定方向内重复指定的元素 （指定元素可以是图片、画布元素、视频元素）

　　　　//方式：repeat（默认、水平和垂直方向上都重复）repeat-x（水平）repeat-y（垂直） no-repeat（不重复）

var img=document.getElementById("lamp"); // 获取img对象
var pat=ctx.createPattern(img,"repeat");  // 指定元素、重复的方式
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

　　4.8 createRadialGradient（）：创建径向渐变；createRadialGradient（x0,y0,r0,x1,y1,r1）

　　　　//x0（渐变开始圆的横坐标），y0（渐变开始圆的纵坐标），r0（渐变开始圆的半径）

　　　　   x1（渐变结束圆的横坐标），y1（渐变结束圆的纵坐标），r1（渐变结束圆的半径）

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

　　4.9 addColorStop（）：规定渐变对象中的颜色和位置，在渐变过程中，该语句至少定义一次

　　　　addColorStop（stop，color）：stop是介于0~1之间的数，表示到开始到结束之间的位置

　　4.10 lineCap ：设置线条末端的样式

ctx.beginPath();
ctx.lineCap="butt"; // 默认，向每个线条的末端添加平直的边缘
ctx.lineCap="round";// 向线条的末端添加一个圆形线帽
ctx.lineCap="square";  // 向线条末端添加一个方形的线帽   
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();

　　4.11 lineJoin：创建边角的类型　　

ctx.beginPath();
ctx.lineJoin="miter"; // 默认创建尖角
ctx.lineJoin="round"; // 创建圆角
ctx.lineJoin="bevel";  // 创建斜角  
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

　　4.12 lineWidth：设置当前线条宽度

ctx.lineWidth = 10; // 直接加Number就可以，默认值是0

　　4.13 clip（）：从原始画布中剪切任意形状和尺寸

ctx.clip();

　　4.14 arcTo（）：arcTo(x1,y1,x2,y2); x1(弧的起点的x坐标)，y1(弧的起点的y坐标)，x2(弧的终点的x坐标)，y2(弧的终点的y坐标)

ctx.beginPath(); 
ctx.moveTo(20,20);           // 创建一个开始点
ctx.lineTo(100,20);          // 创建一个连接点
ctx.arcTo(150,20,150,70,50); // 创建一个弧线
ctx.lineTo(150,120);         //再创建一个连接点
ctx.stroke();                // 勾画

　　4.15 scale（）：缩放当前图像更大或者是更小  注意：在这里放大或缩小的不仅仅是原图像的宽度和高度还有定位也放大或者缩小了

　　　　  scale（width，height）；第一个参数是改变宽度的大小，第二个参数代表是改变高度的大小

ctx.strokeRect(5,5,25,15); //先创建一个对比图，以便于观察大小的变化
ctx.strokeRect(10,10,30,20);//再创建一个对比图，观察定位的变化
ctx.scale(2,2);  // 宽度放大200%，高度方法200%；  
ctx.strokeRect(5,5,25,15);//创建矩形

　　4.16 rotate（）：旋转当前绘图

ctx.rotate(20*Math.PI/180); // 旋转20度
// num*Math.PI/180 旋转num度

　　4.17 重新映射画布上的（0，0）位置

ctx.fillRect(10,10,100,50);
ctx.translate(70,70); // 将新的（0，0）位置设置为（70，70）
ctx.fillRect(10,10,100,50);

　　4.18 transform（）方法替换当前的变换矩阵。transform（a,b,c,d,e,f）

　　　　  a:水平缩放绘图、b:水平倾斜绘图、c:垂直倾斜绘图、d:垂直缩放绘图、e:水平移动绘图、f:垂直移动绘图

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)；
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

　　4.19 fillText（） 在画布上绘制填色的文本。文本的默认颜色是黑色

　　　　  fillText（text，x，y）：text：要绘制的文本、x：开始绘制文本的横坐标、y：开始绘制文本的纵坐标

ctx.fillText("Hello World!",10,50);

　　4.20 strokeText（）在画布上绘制无填充文本

　　　　  strokeText（text，x，y）：text：要绘制的文本、x：开始绘制文本的横坐标、y：开始绘制文本的纵坐标

ctx.fillText("Hello World!",10,50);

　　4.21 font（）：设置当前画布上的字体的属性

ctx.font="30px Arial"; // 字体大小  字体样式
ctx.fillText("Hello World",10,50);

　　4.22 textAlign 文本内容的对齐方式

ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170); // 绘制一条竖线从而更加清晰的看出效果
ctx.stroke();
ctx.font="15px Arial"; 
ctx.textAlign="start"; //  文本在指定的位置开始
ctx.fillText("textAlign=start",150,60); 
ctx.textAlign="end";  //  文本在指定的位置结束
ctx.fillText("textAlign=end",150,80); 
ctx.textAlign="left";   //  文本在指定的位置开始  
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";  //  文本的中心放置在指定位置
ctx.fillText("textAlign=center",150,120); 
ctx.textAlign="right";  //  文本在指定的位置结束
ctx.fillText("textAlign=right",150,140);