- HTML5的canvas元素使用JavaScript画图；
<canvas width="600" height="400"> </canvas>
- 画布默认背景颜色为白色，大小为300*150；
- 若要设置画布大小，不建议在style的样式设置尺寸,效果相当于将原本300*150的画布等比例放大缩小，包括里面画的图；
- 建议在元素本身设置；
<body>
<!-- 准备画布 -->
<canvas width="600" height="400"></canvas>
<!-- 准备绘制工具 -->
<!-- 利用工具绘图 -->
<script>
关于线条的问题
- 默认宽度为1px
- 默认颜色黑色
- 但是显示是灰色，2px宽度，原因是对其点是线的中心位置，会把线分成两个0.5px，显示的会是不饱和增加宽度；
- 解决方法：前或后移动0.5px即可；
- 当要画多条不同样式的平行线时，存在样式覆盖问题，需要开辟新路径；
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext("2d");
- 当绘制图形，需要填充颜色时，使用fill()函数；默认填充颜色为黑色；
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
- 当绘制封闭图形时，会出现起始点和lineTo的结束点无法完全闭合，有缺角
- 解决方法：使用canvas的自动闭合路径closePath()；
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
填充规则（非零环绕）
- 看一块区域是否被填充，从区域画一条直线，看和这条直线相交的轨迹；
- 如果是顺时针就+1，逆时针就-1；
- 计算所有轨迹的和，如果非0就填充，是0就不填充；
- 如上图1区域：轨迹和为1，填充；2区域：轨迹和为2，填充；3区域：轨迹和为0，不填充；
画虚线
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
- 画虚线：通过数组描述虚线的排列方式；
- 获取虚线的排列方式，获取的是不重复的那一段的排列方式；
- 例如：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");
网格、坐标系、点的绘制
- 网格即多条线按一定的规则排列组成；
- 坐标系绘制两条相互垂直的有向线段，箭头自己计算画三角形，进行填充即可；
- 点的绘制
- 需要注意的是，点的坐标要先定下来，用对象存储
- 点的绘制就是以点的坐标为中心，绘制一个正方形，进行填充，点的大小可以控制；
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
图形绘制
弧度绘制
- 什么是弧度？
- 一种长度的描述单位，一个圆有2Π个弧度，一个角度等于Π/180弧度
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
绘制文本
- 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是绘制图片的大小，绘制的图片不是裁剪而是前面截取图片的缩放
- 移动， translate（x,y）；移动的是坐标轴，不是绘制的内容
- 缩放，scale（0.5,1），表示横坐标缩放0.5倍，纵坐标缩放1倍，缩放的是坐标轴，不是绘制的内容
- 旋转，rotate()，旋转中心默认是坐标原点；
