canvas元素 可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内…容将会在在旧的、不支持canvas元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。
canvas 看起来和 img 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上， canvas 标签只有两个属性 —— width 和 height 。这些都是可选的，并且同样利用…。这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用 CSS 来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸
以上是MDN中关于Canvas的一些简单介绍，我不知道Canvas有多少人接触过，我自己也接触没有多久，不做游戏和数据方面的话，用的真的不多，但是知道一些还是有必要的，下面是我自己整理的一些常用的API，其实在MDN上都有，只是比较凌乱，所以自己把这些整理在了一起，没接触过的可能看不太懂，这些都是Canvas的命令，但是有些会忘记，就整理了起来，如果需要，可以拿去，但是最好注明出处
- 标签
<canvas></canvas> - 默认宽300，高150，不用用Css设置宽高
- 获取方法var ctx = cas.getcontext(“2d”),该方法返回CanvasRenderingContext2D的类型对象，利用该方法绘图
- 基本绘图命令
- 设置开始绘图位置：ctx.moveTo(x,y);
- 设置直线到的位置：ctx.lineTo(x,y);
- 描边绘制：ctx.stroke();
- 填充绘制：ctx.fill();
- 自动闭合路径：ctx.closePath();
- 开启新的绘制：ctx.beginPath();
- 设置描边颜色：ctx.strokeStyle;
- 设置填充颜色：ctx.fillStyle;
- 保存开始设置：ctx.save();
- 重置到保存样式：ctx.restore();
- 线型相关属性
- 设置线宽：ctx.linewidth;(数字即可)
- 设置线末端类型：ctx.lineCap;(‘butt’ 表示两端使用方形结束,’round’ 表示两端使用圆角结束,’square’ 表示突出的圆角结束)
- 设置相交线的拐点：ctx.lineJoin;(’round’ 使用圆角连接,’bevel’ 使用平切连接,’miter’ 使用直角转)
- 获得线段样式数组：ctx.getLineDash();
- 设置线段样式：ctx.setLineDash();(数组形式设置)
- 绘制线段偏移量：ctx.lineDashOffset;
- 矩形绘图命令
- 绘制矩形：ctx.rect;(因为还需要fill或者stroke才可以看见效果，所以直接使用下面两种)
- 绘制边框矩形：ctx.strokeRect(x,y,width,height);
- 绘制填充矩形：ctx.fillRect(x,y,width,height);
- 清除矩形区域：ctx.clearRect(x,y,width,height);
- 圆弧绘制命令
- 绘制圆弧：ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选
- 绘制文本命令
- 绘制填充文字：ctx.fillText(text,x,y);
- 绘制空心文字：ctx.strokeText(text,x,y);
- 设置字体样式：ctx.font;
- 设置字体水平位置：ctx.textAlign;(start(默认), end, left, right, center)
- 设置字体垂直位置：ctx.textBaseline;(top, middle, bottom, hanging, alphabetic, ideographic)
- 绘制图片命令
- 绘制图片(3参数)：ctx.drawImage(img,casx,casy);
- 绘制图片(5参数)：ctx.drawImage(img,casx,casy,width,height);
- 绘制图片(9参数)：ctx.drawImage(img,x,y,width,height,casx,casy,caswidth,casheight);
- 变换命令
- 平移变换：ctx.translate(x,y);(x 表示水平移动, 正数向右, 负数向左;y 表示垂直移动, 正数向下, 负数向上)
- 旋转变化：ctx.ratate(radian);(参数是弧度, 表示旋转的方式. 正数表示顺时针旋转, 负数表示逆时针旋转.)
- 缩放变化：ctx.scale(x,y);(x控制水平缩放倍率,y控制水平缩放倍率,传1不做缩放)
Original: https://www.cnblogs.com/crazycode2/p/16467597.html
Author: 每天都要进步一点点
Title: canvas 常用 api 及 设计
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/545700/
转载文章受原作者版权保护。转载请注明原作者出处！