HTML5中的Canvas绘图
canvas简介
canvas时HTML5提供的一种新标签,它本身不具备绘图功能，主要通过JavaScript的脚本来进行图片的绘制。它只是一个图形容器，是一个矩形区域画布，其默认在页面的大小是width：300px；height：100px；其上图形的绘制需要借助javascript来实现。
兼容性：
IE9以上以及chrome，ff，苹果的浏览器都支持，只要浏览器兼容canvas，那么就会支持绝大部分API。2d效果的大部分都支持，3d效果除IE11以下，其他的浏览器都是支持的。在写代码时最好加上友好提示：<canvas id="this_canvas">您的浏览器不支持canvas，请升级浏览器显示此行文本</canvas>
这里有一些注意事项：
1、不要用css控制它的宽和高，不然会出现图片拉伸。
2、重新设置canvas标签的宽高属性会擦除掉画布的所有内容。
3、canvas画布是可以设置背景色的。
canvas使用方法
1、首先获取canvas对象；
2、开始设置画布尺寸，请注意，画布尺寸一定要提前设置，不然其中的内容会被擦除。
3、然后将画布转化为2d模型。
4、然后使用各种API进行绘制。
如下面代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#myCanvas{
border:1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas">您的浏览器不支持canvas，请升级浏览器浏览器后查看此行文本</canvas>
<script>
//首先要获取canvas对象
var myCanvas=document.querySelector("#myCanvas");
//其次开始设置画布尺寸，请注意，画布尺寸一定要提前设置，不然其中的内容会被擦除。
myCanvas.width=900;
myCanvas.height=600;
//然后将画布转化为2d模型
var drawing=myCanvas.getContext("2d");
//然后使用各种API进行绘制。
</script>
</body>
</html>
常用接口简介
方法：
fill（）；
填充形状内部。
使用方法：变量名.fill(); 变量名.fill(fillRule); 变量名.fill(path,fillRule);
其中，fillRule是填充规则，用来确定一个点是在路径内还是路径外。可选的值包括nonzero（非零规则【默认】）和evenodd（奇偶规则），这里不赘述，详情就请参见canvas官网介绍。
stroke（）；
对路径进行描边。
用法：变量名.stroke。
strokeStyle();
用来设置描边样式，使用方法： 变量名.strokeStyle=color/gradient/pattern可以设置描边为颜色，渐变，图案。
save();
存储当前的canvas画布状态，并放置到堆栈顶端，之后可以用restore方法依次取出。
使用方法：变量名.save（）；
restore();
将堆栈中保存的画布状态依次弹出，如果没有存储的canvas状态，则该方法没有任何作用。
使用方法：变量名.restore();没有返回值，没有参数。
clearReact（）；
把canvas元素画布中的矩形区域变成透明的，多用来不断清除画布进行再绘制。使用方法：变量名.clearReact(x,y,width,height);其中x，y分别对应要清除的矩形的左上角的横纵坐标，width表示被清除的矩形区域的高度，height表示被清除的矩形区域的宽度。
矩形
rect（）；
绘制矩形路径，使用方法同下面两个矩形，要注意的是，使用它绘制出来的仅仅是路径，要是不使用fill进行填充或者使用storke进行描边操作，那么该矩形不会在画布上显示出来。
fillRect（）；
矩形填充。使用方法：变量名.fillRect(x,y,width,height);其中参数分别代表：填充矩形的起始横坐标，纵坐标，宽度和高度。
strokeRect（）；
矩形描边效果，使用方法：变量名.strokeRect(x,y,width,height);其中参数分别代表：描边矩形的起始横坐标，纵坐标，宽度和高度。
drawing.fillStyle="pink";
drawing.fillRect(50,50,100,100);
drawing.fill();
drawing.restore();//重新取用第一次存储的状态。
drawing.fillStyle="green";
drawing.fillRect(200,50,100,100);
drawing.fill();
drawing.restore();
drawing.strokeStyle="red";//颜色设置要在描边之前，不然颜色不会加到边上去。
drawing.strokeRect(350,50,100,100);
drawing.stroke();
结果如下图：
文本
filltext（）；
主要用来绘制填充文本。使用方法：变量名.fillText(text,x,y,[maxwidth(可选)])；其中，text是所要填充的文本内容，x和y分别是填充文本的起点横纵坐标，maxwidth可选填，代表填充文本所占据的最大宽度，若是超过最大宽度，则通过压缩文本宽度进行适配而不是换行。
strokeText（）；
文本描边效果，此描边为居中描边。使用方法同上。
font=value;
用来设置字体样式，使用方法例如：变量名.font="50px 幼圆"。
drawing.restore();
drawing.strokeStyle="purple";
drawing.font="50px 幼圆"
drawing.strokeText("我是一只不平凡的鸡",200,300,400);
drawing.stroke();
drawing.fillStyle="pink";
drawing.font="微软雅黑 100px";
drawing.fillText("微软雅黑",500,400,800);
drawing.fill();
结果如下：
圆形
arc（）；
绘制圆弧，也可用它来绘制正圆。使用方法：变量名.arc(x,y,radius,startAngle,endAngle,[anticlockwidse]);其中参数分别对应圆弧的圆心很纵坐标，圆弧的半径大小，圆弧的开始角度和结束角度，圆弧从开始到结束按照顺时针还是逆时针计算，若为true则为逆时针，若为false则为顺时针。
arcTo（）；
给路径添加圆弧，需要指定控制点和半径。使用方法：变量名.arcTo（x1,y1,x2,y2,radius）;其中参数分别对应第一个控制点的横纵坐标，第二个控制点的横纵坐标，以及圆弧的半径大小。
ellipse();
用来绘制椭圆，但此方法ie浏览器暂不支持。使用方法：变量名.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise);其参数分别为：椭圆对应的圆心横纵坐标，长轴半径大小，短轴半径大小，椭圆的旋转角度单位是弧度，圆弧开始的角度（单位是弧度），圆弧结束的角度（单位是弧度），绘制方向是顺时针还是逆时针true是逆时针。
drawing.restore();
drawing.strokeStyle="blue";
drawing.arc(400,500,100,0,Math.PI/2,true);
drawing.stroke();
drawing.save();
drawing.restore();
drawing.beginPath();
drawing.strokeStyle="red";
drawing.ellipse(100,400,100,50,0,Math.PI*2,false);
drawing.stroke();
drawing.closePath();
drawing.save();
线条绘制
路径：beginpath（）和closepath（）结合起来用来区分不同的路径绘制。没有参数和返回值。beginpath是开始路径，closepath是结束路径。
直线：moveTo()和lineTo（）结合起来用来绘制直线，以连接当前和最后的子路径点。moveto为开始路径，lineto为结束路径。其中的参数x，y分别对应绘制的直线落点的横纵坐标。
线条宽度：
表示线宽，默认为1.0。可以用来改变线的宽度。使用方法：变量名.lineWidth=value;
drawing.restore();
drawing.strokeStyle="pink";
drawing.beginPath();
drawing.moveTo(300,300);
drawing.arcTo(350,300,400,450,50);
drawing.arcTo(350,450,450,500,50);
drawing.lineTo(500,500);
drawing.stroke();
drawing.closePath();
图形变换
transform()
对当前坐标系进行变换，以实现缩放旋转拉伸或者唯一的效果。使用方法：变量名.tansform(a,b,c,d,e,f);其参数分别对应，水平缩放，水平斜切，垂直斜切，垂直缩放，水平位移，垂直位移。
translate()
对canvas整体坐标系进行位移。其中参数x，y分别为坐标系水平位移的距离和坐标系垂直位移的距离。
rotate()
给canvas画布，添加旋转矩阵，顺时针方向，单位为弧度。默认旋转中心点是canvas左上角的0，0坐标点。使用方法：变量名.rotate(angle);
这里，如果想要以图片中心旋转，则需要先用translate进行坐标位移，然后将其旋转45度，再位移回来，此时绘制的图片就是中心旋转了。
scale()；
缩放canvas画布坐标系，只影响坐标系及之后绘制的图形，之前已经绘制好的效果不会有任何变化。，默认缩放中心是0,0。其中参数分别为，x水平缩放的比例，小数也可以，如果值为负数，表示水平翻转，y垂直缩放的比例，如果值为负数，表示垂直翻转。
clip()
路径裁剪，使用时先绘制裁剪路径，再执行这个方法，就可以剪裁出路径样式的图片。即可以用剪裁实现一个图案效果填充。
//官网上有这样一段代码，用clip来实现一个三角形路径里填充图片
这里要记住，将那个变量设置为2d模型，后面就要用该变量，否则就加不上去。
var context=canvas.getContext('2d');
var img=new Image();
img.onload=function(){
context.beginPath();
//绘制三角形
context.moveTo(20,20);
context.lineTo(200,80);
context.lineTo(110,150);
//剪裁
context.clip();
//填充图片
context.drawImage(img,0,0,250,167);
context.closePath();
};
img.src='./1.jpg';
//利用裁切功能绘制拼图验证
var img = new Image();
img.onload = function () {
drawing.beginPath();
drawing.rect(50, 300, 100, 100);
drawing.lineTo(75, 300 );
drawing.arcTo(100, 275, 125, 300, 25);
drawing.lineTo(125, 300);
drawing.clip();
drawing.drawImage(img, 0, 0, 900, 900);
drawing.closePath();
}
img.src = "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1554589653,233370381&fm=26&gp=0.jpg";
渐变
createLinearGradient()
用来创建线性渐变对象，注意，在这里，渐变坐标是全局的，而不是相对于填充元素计算的。使用方法：context.createLinerGradient（x0，y0，x1，y1）；其中，参数分别为，渐变起始点横纵坐标，渐变终止点横纵坐标。
createRadialGradient()
用来创建径向渐变，它的起始点由两个圆环坐标构成而非点坐标。使用方法：变量名.createRadialGradient(x0,y0,r0,x1,y1,r1);其参数分别为，第一个圆环的中心坐标和半径，第二个圆环的中心坐标及半径。
drawing.beginPath();
//设置线性渐变方向和渐变色所占比重。
var jianbian=drawing.createLinearGradient(200,300,500,400);
jianbian.addColorStop(0.1,"red");
jianbian.addColorStop(0.3,"blue");
jianbian.addColorStop(0.6,"pink");
jianbian.addColorStop(0.9,"green");
drawing.fillStyle=jianbian;
//上色
drawing.fillRect(200,300,100,100);
drawing.closePath();
drawing.restore();
drawing.beginPath();
//设置径向渐变方向和渐变色所占比重。
var jingxiang=drawing.createRadialGradient(400,400,50,400,400,100);
jingxiang.addColorStop(0.1,"red");
jingxiang.addColorStop(0.3,"blue");
jingxiang.addColorStop(0.6,"pink");
jingxiang.addColorStop(0.9,"green");
//绘制圆弧
drawing.arc(400,400,100,0,Math.PI*2,false);
drawing.fillStyle=jingxiang;
drawing.fill();
drawing.closePath();
//渐变文本边框
var wenzi=drawing.createLinearGradient(50,200,400,200);
wenzi.addColorStop(0.2,"purple");
wenzi.addColorStop(0.4,"blue");
wenzi.addColorStop(0.6,"green");
wenzi.addColorStop(0.8,"yellow");
drawing.strokeStyle=wenzi;
drawing.font="80px 幼圆";
drawing.strokeText("canvas是我们的希望",50,200,400);
drawing.stroke();
结果如下图：
阴影
shadowBlur
用来指定阴影的模糊程度，默认值是0，表示不模糊。使用方法：context.shadowBlur=value；会忽略负数，NaN。
shadowcolor
用来指定阴影的颜色，默认值为透明黑，也就是看不到颜色，所以要是想要看到阴影效果，必须指定颜色。使用方法：变量名.shadowcolor=color;
shadowoffsetX
表示阴影的水平偏移大小。使用方法：变量名.shadowOffsetX=offset;offset表示偏移的大小。
shadowoffsetY
表示阴影的垂直偏移大小。
var wenzi=drawing.createLinearGradient(50,200,400,200);
wenzi.addColorStop(0.2,"purple");
wenzi.addColorStop(0.4,"blue");
wenzi.addColorStop(0.6,"green");
wenzi.addColorStop(0.8,"yellow");
drawing.strokeStyle=wenzi;
drawing.shadowColor="lightgray";
drawing.shadowBlur=4;
drawing.shadowOffsetX=20;
drawing.shadowOffsetY=20;
drawing.font="80px 幼圆";
drawing.strokeText("canvas是我们的希望",50,200,400);
drawing.stroke();
杂类
drawImage()
寻找一个区域用来放置图形， 一般用来做水印。使用方法：变量名.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,Dheight);其参数为：图片元素，图片元素绘制在画布上的起始横纵坐标；图片元素从坐标点开始算，多大的内容绘制在画布上（其实就是剪裁图片上的某一部分作为绘制内容。）；图片元素放置在画布上的区域的横纵坐标，以及区域的宽高。
getImageData()
返回一个inmagedata对象，其中包含canvas画布部分或者完整的像素点信息。用来处理像素级的信息。比如将一个绘制好的canvas图像中间的一部分变色。使用方法：变量名.getinmagedata(sx,sy,swidth,sheight);其中的参数，分别为需要返回的图像数据区域的起始横纵坐标，需要返回的图像数据区域的宽高。
createImageData()
创建一个全新的空的图片对象，该对象中所有像素都是透明黑。使用方法：变量名.createImagedata(width,height);其参数分别为图像最终呈现的宽高。
createPattern()
用来创建图案对象，可以指定平铺方式。使用方式：变量名.createPattern(image,repetition);其中参数分别为用来平铺的对象以及平铺方式。平铺方式有：repeat-x和repeat-y水平和垂直平铺，如果没有区分x和y则为都平铺。no-repeat为不平铺。
globalAlpha（）
设置全局透明度，范围是0-1.使用方法：变量名.globalAlpha=value；
本文地址：https://blog.csdn.net/weixin_44759795/article/details/107254908
下一篇： 栈的应用实例