canvas画布基本知识点总结

  • 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> 

关于线条的问题

  1. 默认宽度为1px
  2. 默认颜色黑色
  3. 但是显示是灰色,2px宽度,原因是对其点是线的中心位置,会把线分成两个0.5px,显示的会是不饱和增加宽度;
  4. 解决方法:前或后移动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);
  1. img图片对象、canvas对象、video对象
  2. 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(),旋转中心默认是坐标原点;

相关推荐

发表评论

路人甲

网友评论(0)