canvas画布基本知识点总结

时间 2021-02-17

标签 javascript css html java canvas 数组框架 ide 函数工具栏目 JavaScript 繁體版

原文原文链接

HTML5的canvas元素使用JavaScript画图；

<canvas width="600" height="400">  </canvas>

canvas画图的基本框架

画布默认背景颜色为白色，大小为300*150；
若要设置画布大小，不建议在style的样式设置尺寸,效果至关于将本来300*150的画布等比例放大缩小，包括里面画的图；
建议在元素自己设置；

<body> <!-- 准备画布 --> <canvas width="600" height="400"></canvas> <!-- 准备绘制工具 --> <!-- 利用工具绘图 --> <script> // 获取元素 var myCanvas=document.querySelector('canvas'); // 获取上下文,绘制工具箱 var ctx=myCanvas.getContext('2d'); // 移动画笔 ctx.moveTo(100,100); // 绘制直线（轨迹，绘制路径） ctx.lineTo(200,100); // 描边 ctx.stroke(); </script> </body>

关于线条的问题

默认宽度为1px
默认颜色黑色
可是显示是灰色，2px宽度，缘由是对其点是线的中心位置，会把线分红两个0.5px，显示的会是不饱和增长宽度；
解决方法：前或后移动0.5px便可；

当要画多条不一样样式的平行线时，存在样式覆盖问题，须要开辟新路径；

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas=document.querySelector("canvas"); var ctx=myCanvas.getContext("2d"); // 画平行线 // 蓝色 10px ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.strokeStyle="blue"; ctx.lineWidth=10; ctx.stroke(); // 红色 20px ctx.beginPath();//开辟新路径 ctx.moveTo(100,200); ctx.lineTo(200,200); ctx.strokeStyle="red"; ctx.lineWidth=20; ctx.stroke(); // 绿色 30px ctx.beginPath();//开辟新路径 ctx.moveTo(100,300); ctx.lineTo(200,300); ctx.strokeStyle="green"; ctx.lineWidth=30; ctx.stroke(); </script> </body>

当绘制图形，须要填充颜色时，使用fill()函数；默认填充颜色为黑色；

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector("canvas"); var ctx = myCanvas.getContext("2d"); // 绘制一个三角形 ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); ctx.lineTo(100,100); // 描边 ctx.stroke(); // 填充 ctx.fill(); </script> </body>

当绘制封闭图形时，会出现起始点和lineTo的结束点没法彻底闭合，有缺角
解决方法：使用canvas的自动闭合路径closePath()；

<canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector("canvas"); var ctx = myCanvas.getContext("2d"); // 绘制一个三角形 ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); // 起始点和lineTo的结束点没法彻底闭合，有缺角； // ctx.lineTo(100,100); // 使用canvas自动闭合 ctx.closePath(); ctx.lineWidth=10; // 描边 ctx.stroke(); </script>

填充规则（非零环绕）

看一块区域是否被填充，从区域画一条直线，看和这条直线相交的轨迹；
若是是顺时针就+1，逆时针就-1；
计算全部轨迹的和，若是非0就填充，是0就不填充；
如上图1区域：轨迹和为1，填充；2区域：轨迹和为2，填充；3区域：轨迹和为0，不填充；

画虚线

<script> var myCanvas = document.querySelector("canvas"); var ctx = myCanvas.getContext("2d"); // 画线 ctx.moveTo(100.5, 100.5); ctx.lineTo(300, 100.5); ctx.setLineDash([5,10,15]); ctx.stroke(); </script>

画虚线：经过数组描述虚线的排列方式；
获取虚线的排列方式，获取的是不重复的那一段的排列方式；
例如：console.log(ctx.setLineDash());获取的是5 10 15 5 10 15;
括号里数字为[数字长度，空格长度，数字长度，空格长度…]；

画渐变矩形（例如黑白渐变）

主要利用for循环，逐渐改变线条颜色，矩形经过多个线条拼凑；

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector("canvas"); var ctx = myCanvas.getContext("2d"); // 绘制一个矩形 // ctx.moveTo(100, 100); // ctx.lineTo(255,100); // ctx.lineWidth='30'; // // 颜色填充 // ctx.strokeStyle='#fff'; // // 从黑到白 // ctx.stroke(); // 线是由点构成的 ctx.lineWidth = '30'; //起始位置 // ctx.moveTo(100, 100); for (var i = 0; i < 255; i++) { //画255条1px长的线； //每次开辟一条新路径，否则会样式覆盖 ctx.beginPath(); //起始位置 ctx.moveTo(100 + i - 1, 100); //结束位置 ctx.lineTo(100 + i, 100); ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')'; //描边 ctx.stroke(); } </script> </body>

网格、坐标系、点的绘制

网格即多条线按必定的规则排列组成；
坐标系绘制两条相互垂直的有向线段，箭头本身计算画三角形，进行填充便可；
点的绘制
须要注意的是，点的坐标要先定下来，用对象存储
点的绘制就是以点的坐标为中心，绘制一个正方形，进行填充，点的大小能够控制；

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); //绘制点 //点的尺寸 //以坐标中心绘制点 //点坐标 var coordinate = { x: 146, y: 357 } //点尺寸 var dottedSize = 6; ctx.moveTo(coordinate.x - dottedSize / 2, coordinate.y - dottedSize / 2); ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y - dottedSize / 2); ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y + dottedSize / 2); ctx.lineTo(coordinate.x - dottedSize / 2, coordinate.y + dottedSize / 2); ctx.closePath(); ctx.fill(); </script> </body>

图形绘制

参数（x，y）为坐标，（w，h）为宽高；

弧度绘制

什么是弧度？
一种长度的描述单位，一个圆有2Π个弧度，一个角度等于Π/180弧度

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); //绘制圆弧 //1.肯定圆心 //2.肯定圆的半径 //3.肯定起始位置和结束位置，肯定圆弧长度和位置 //4.肯定绘制方向（通常是默认的顺时针）direction var w=ctx.canvas.width; var h=ctx.canvas.height; //在中心位置画一个半径150px的圆弧右下角（横坐标，纵坐标，半径，起始角度，结束角度） ctx.arc(w/2,h/2,150,0,Math.PI/2); ctx.stroke(); </script> </body>

绘制扇形时，圆心的肯定要放在画弧形的前面；

绘制文本

ctx.font='微软雅黑’设置字体；
strokeText(text,x,y,maxWidth);
fillText(text,x,y,maxWidth);
text即要绘制的文本；
x,y为文本绘制的坐标（文本左下角）；
maxWidth设置文本的最大宽度，可选参数；
ctx.textAlign文本水平对齐方式，相对绘制坐标来讲；
可取值有 left center right start默认 end
ctx.direction属性css(rtl ltr)start和end与此相关；
若为ltr则start和left表现一致；
若为rtl则start和right表现一致；
ctx.textBaseline设置基线（垂直对齐方式）；
top文本的基线处于文本的正上方，而且有一段距离；
middle文本的基线处于文本的正中间
bottom文本的基线处于文本的正下方，而且有一段距离；
hanging文本的基线处于文本的正上方，而且与文本粘合；
alphabetic默认值，文本的基线处于文本的正下方，而且穿过文字；
ideographic和bottom类似，可是不同；
measureText()获取文本的宽度obj.width；
注意
文本样式设置要在文本描边或者填充以前；
左右对齐方式的对齐基准是文字描绘的起始坐标；

图片绘制

drawImage()
三个参数drawImage( image, x , y);

img图片对象、canvas对象、video对象
x,y图像绘制的左上角

五个参数drawImage( image, x , y , w, h);
w，h分别为图形的宽高设置，是缩放，不是截取，其他参数意义同上；
九个参数drawImage( image, x , y , w , h, x1, y1 ,w1, h1);
image是图片对象，x,y是图片定位的坐标（即原图片上图片从哪开始截取），w,h是在原图片上的图片截取区域大小，x1,y1是绘制在画布上的坐标，w1,h1是绘制图片的大小，绘制的图片不是裁剪而是前面截取图片的缩放

canvas的2d转换

移动， translate（x,y）；移动的是坐标轴，不是绘制的内容
缩放，scale（0.5,1），表示横坐标缩放0.5倍，纵坐标缩放1倍，缩放的是坐标轴，不是绘制的内容
旋转，rotate()，旋转中心默认是坐标原点；