canvas绘制基础图形（canvas 气泡框 网格线 三角形 圆角矩形 箭头）
canvas绘制基础图形
这两天整理了下项目中用到的函数，学着博客里的方法封装成了一个插件，若有不对的地方，还请不吝赐教，谢谢！
- javascript立即执行函数
- 怎样用原生JS封装自己需要的插件
- canvas Two 三角形
- Canvas学习：绘制箭头
更新日期：2020-03-24
更新版本：1.1.1
内容：增加绘制横线 增加绘制气泡框
功能介绍
- 1.初始化画布 initCanvas
- 2.绘制网格线 drawGridlines
- 3.绘制圆点 drawDot
- 4.绘制圆环 drawRing
- 5.绘制图片 drawImg
- 6.绘制文字 drawText
- 7.绘制竖线 drawVertiLine
- 8.绘制圆角矩形 drawRoundRect
- 9.绘制向上三角形 drawUpTriangle
- 10.绘制向下三角形 drawDownTriangle
- 11.绘制向左三角形 drawLeftTriangle
- 12.绘制向右三角形 drawRightTriangle
- 13.绘制向上箭头（必须是标准方向）drawUpArrow
- 14.绘制向下箭头（必须是标准方向）drawDownArrow
- 15.绘制向左箭头（必须是标准方向）drawLeftArrow
- 16.绘制向右箭头（必须是标准方向）drawRightArrow
- 17.绘制向上气泡框 drawUpBubbleBox
- 18.绘制向下气泡框 drawDownBubbleBox
- 19.绘制向右气泡框 drawRightBubbleBox
- 20.绘制向左气泡框 drawLeftBubbleBox
- 21.绘制横线 drawHorizontalLine
示例
<!DOCTYPE html>
<head>
<script src="canvas-basic-graphics.js"></script>
</head>
<body>
<div>
<canvas id="basicGraphics" style="border:1px solid #333;"></canvas>
</div>
</body>
<script>
var basicGraphics1 = basicGraphics.initCanvas('basicGraphics', 1000, 500);
console.log('basicGraphics1', basicGraphics1);
basicGraphics1.drawGridlines(20, '#F5F5DC',2);
basicGraphics1.drawDot(100, 100, 50, 'pink');
basicGraphics1.drawRing(210, 100, 30, '#00EE76', '#43CD80');
basicGraphics1.drawRing(310, 100, 35, '#00EE76', '#fff');
basicGraphics1.drawImg(360, 50, 'timg (1).jpg', function () {
console.log('draw img OK');
}, 100, 100);
basicGraphics1.drawText(50, 200, 'halohalohalohalohalohalohalohalohalohalo');
basicGraphics1.drawText(50, 250, 'yawayawayawayawa', '24px Arial bold', 'red', true, 10);
basicGraphics1.drawText(280, 250, '你好1234你好你好你好你好你好你好', '20px Arial bold', 'blue', true, 10, true, 8);
basicGraphics1.drawVertiLine(420,0,350,'orange');
basicGraphics1.drawVertiLine(450,0,350,'Yellow',5,[5,2]);
basicGraphics1.drawRoundRect(500,50,150,100,10,'#8B658B');
basicGraphics1.drawRoundRect(680,50,150,80,5,'#9370DB','#ADD8E6');
basicGraphics1.drawRoundRect(850,50,100,100,2,'#CAFF70','#CAFF70');
basicGraphics1.drawUpTriangle(50,350,80,'#FFDAB9','#FFF8DC',5,[5,2]);
basicGraphics1.drawDownTriangle(150,300,90,'#00C5CD');
basicGraphics1.drawLeftTriangle(250,350,60,'#7B68EE','#7B68EE',5);
basicGraphics1.drawRightTriangle(320,300,90,'#3CB371');
basicGraphics1.drawUpArrow(500,350,500,200,60,'#8B658B',10,[5,2]);
basicGraphics1.drawDownArrow(550,200,550,350,80,'#9370DB',6);
basicGraphics1.drawLeftArrow(600,200,800,200,80,'#ADD8E6',2); // 只能走左右正方向
basicGraphics1.drawRightArrow(800,350,600,350,80,'#CAFF70');
basicGraphics1.drawUpBubbleBox(50,400,120,80,30,'#8B658B','#FFDAB9',20,[5,2]);
basicGraphics1.drawDownBubbleBox(180,390,120,80,30,'#3CB371','#CAFF70',20,[5,2]);
basicGraphics1.drawRightBubbleBox(320,390,60,100,30,'#00C5CD','#ADD8E6',10);
basicGraphics1.drawLeftBubbleBox(450,390,60,100,30,'orange','Yellow',10);
</script>
插件
canvas-basic-graphics.zip